/* ============================================================
   业务员工作台 —— 专用样式
   复用 style.css 的设计变量与通用组件（按钮/表格/弹窗/toast），
   这里只补「无侧边栏的布局」与「防复制 / 水印 / 隐私遮罩」。
   ============================================================ */

/* ---------------------------------------------------- 布局（无侧边栏，比总后台更窄更聚焦） */

.sales-shell { min-height: 100vh; display: flex; flex-direction: column; }

.sales-top {
  height: 58px; background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  position: sticky; top: 0; z-index: 20;
}
.sales-top .logo {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, #14a05a, #37c07d);
  color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.sales-top .ttl { font-weight: 600; font-size: 15px; line-height: 1.25; }
.sales-top .spacer { flex: 1; }
.sales-top .me { text-align: right; font-size: 12.5px; color: var(--text-mid); line-height: 1.35; }
.sales-top .me b { font-size: 13px; }

.sales-main { flex: 1; padding: 18px 20px 48px; max-width: 1280px; width: 100%; margin: 0 auto; }

/* 顶部提示条与状态统计条已按需求移除（防复制说明改由「复制」按钮的行为本身体现，
   统计数字对业务员没有操作价值）。相关样式一并删掉，避免留下死代码。 */

/* 登录页（场景层 / 玻璃卡片 / 输入框 / 窄屏居中）样式已上移到 style.css，
   与总后台共用一套，避免两端各改一份。 */

/* ---------------------------------------------------- 已复制标记 */

/* 复制成功后整行（手机端是整张卡片）变色 + 左侧色条，
   业务员一眼就能看出这条客户已经拿过了，不用靠记忆。 */
.tbl tr.row-copied { background: var(--success-soft); }
.tbl tr.row-copied > td:first-child { box-shadow: inset 3px 0 0 var(--success); }

/* 企业名称旁的「已复制」小徽标 */
.copied-flag {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-size: 11px; line-height: 1.7; border-radius: 999px;
  background: #fff; color: var(--success);
  border: 1px solid rgba(20, 160, 90, .38);
  vertical-align: middle;
}

@media (max-width: 720px) {
  .sales-top { height: auto; padding: 10px 14px; flex-wrap: wrap; }
  .sales-main { padding: 14px 12px 40px; }
  .sales-top .me { text-align: left; }
}

/* ---------------------------------------------------- 防复制：禁止选中 / 拖拽 / iOS 长按 */

body.sales-app {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* 输入框要保留正常的选中与粘贴能力，否则账号密码、搜索词没法用 */
body.sales-app input,
body.sales-app textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
/* 表格与详情区彻底禁掉拖拽选中 */
body.sales-app table,
body.sales-app .dl,
body.sales-app .card { -webkit-user-drag: none; }

/* ---------------------------------------------------- 水印层（泄露溯源） */

.wm-layer {
  position: fixed; inset: 0; z-index: 2600;
  pointer-events: none;
  background-repeat: repeat;
  opacity: .5;
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------- 隐私遮罩（失焦 / 切后台时盖住内容） */

.privacy-mask {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244, 246, 250, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}
.privacy-mask[hidden] { display: none; }

.privacy-card { text-align: center; color: var(--text-mid); }
.privacy-card .privacy-ico { font-size: 34px; margin-bottom: 10px; }
.privacy-card .privacy-t { font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.privacy-card .privacy-s { font-size: 12.5px; color: var(--muted); }

/* 遮罩出现时把应用内容也糊掉：即使遮罩被工具隐藏，底下仍然看不清 */
body.privacy-on .sales-shell { filter: blur(9px); }

/* ---------------------------------------------------- 屏蔽打印 / 打印成 PDF */

@media print {
  /* 隐藏全部内容，只留一句提示。注意不能把 body 本身 display:none，
     否则 ::after 也一起没了，打印出来会是白纸（用户会以为是浏览器故障）。 */
  body.sales-app > * { display: none !important; }
  body.sales-app::after {
    content: '该页面禁止打印或导出 PDF';
    display: block; padding: 60px 20px; text-align: center;
    font-size: 16px; color: #333;
  }
}

/* ============================================================
   移动端适配（手机 / 平板）
   ------------------------------------------------------------
   桌面端一个像素都不动：以下规则全部包在媒体查询里，并统一用
   .sales-app 前缀限定，避免波及总后台（两页共用 style.css）。
   要解决的四个真问题：
     1. 8 列宽表格在手机上必然横向溢出 → 每行折成一张卡片
     2. 触摸目标偏小；iOS 聚焦 <16px 的输入框会自动放大整页
     3. 100vh 在移动浏览器里含地址栏高度，会多出一截滚动
     4. 刘海屏安全区 / 触屏 hover 粘滞
   ============================================================ */

/* 桌面端搜索框宽度：原先写死在 JS 内联样式里，现在收归 CSS 以便断点覆盖 */
.sales-app .search-input { width: 240px; }

/* ---------------------------------------------------- 操作列：唯一按钮「复制」
   每条客户只有一个操作，按需求摆在该行右上角：
   桌面 → 该行最右侧那一列，右对齐 + 顶对齐（行内文字换行时按钮仍在顶部）；
   手机 → 卡片右上角（见下方 820 断点里的绝对定位）。 */
.sales-app .op-col { width: 1%; text-align: right; vertical-align: top; white-space: nowrap; }

/* ---------------------------------------------------- 窄屏：手机 + 竖屏平板
   卡片化断点定在 820px（与总后台侧边栏折叠断点一致）。768 宽的 iPad 竖屏
   塞 8 列表格虽然能横向滚，但一边滚一边对数据很难受，不如直接给卡片。 */
@media (max-width: 820px) {

  /* 1) 视口高度：100vh 在移动浏览器里含地址栏高度，会多出一截滚动；
        100dvh 才是真实可视高度（旧浏览器自动回退到上一行的 100vh）。 */
  .sales-app .sales-shell { min-height: 100vh; min-height: 100dvh; }
  .sales-app .login-wrap { min-height: 100vh; min-height: 100dvh; }
  .sales-app .sales-main { padding: 16px 14px calc(28px + env(safe-area-inset-bottom)); }

  /* 2) 触摸目标：点得中比好看重要（≥38px，向 iOS 建议的 44px 靠） */
  .sales-app .btn { min-height: 38px; padding: 8px 14px; }
  .sales-app .btn-sm { min-height: 36px; padding: 7px 12px; font-size: 13px; }

  /* 3) 输入框字号必须 ≥16px，否则 iOS Safari 一聚焦就自动放大整页 */
  .sales-app .input, .sales-app .select, .sales-app .textarea,
  .sales-app .input-sm, .sales-app .select.input-sm { font-size: 16px; }

  /* 4) 卡片内边距收紧 */
  .sales-app .card-body { padding: 14px; }
  .sales-app .card-body.tight { padding: 0; }
  .sales-app .card-head { padding: 12px 14px; }

  /* 5) 筛选行：搜索框独占一行，按钮与下拉平分第二行 */
  .sales-app .card-body .row { gap: 8px; }
  .sales-app .card-body .row .search-input { flex: 1 1 100%; width: 100%; }
  .sales-app .card-body .row > .spacer { display: none; }
  .sales-app .card-body .row > .btn,
  .sales-app .card-body .row > .select { flex: 1 1 auto; }

  /* 6) 核心：表格 → 卡片。每行独立成卡，td 用 data-label 补回「这格是什么」 */
  .sales-app .list-card { border: 0; box-shadow: none; background: transparent; margin-bottom: 0; }
  .sales-app .list-card .card-body.tight { padding: 0; }
  .sales-app .table-wrap { overflow: visible; }
  .sales-app table.tbl { display: block; font-size: 13.5px; }
  .sales-app table.tbl thead { display: none; }
  .sales-app table.tbl tbody { display: block; }
  .sales-app table.tbl tr {
    display: block; position: relative; background: #fff;
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 10px;
  }
  .sales-app table.tbl td { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; border: 0; }
  .sales-app table.tbl td::before {
    content: attr(data-label);
    flex: 0 0 72px; color: var(--muted); font-size: 12px; line-height: 1.85;
  }
  /* 表格里写死的 nowrap 必须放开，否则长地址/长信用代码会顶破卡片 */
  .sales-app table.tbl td.nowrap,
  .sales-app table.tbl td.mono { white-space: normal; word-break: break-word; }
  /* 第一列（企业名称）当卡片标题：不显示小标题、加大字号、下面加虚线分隔。
     右侧留出 64px 给右上角的「复制」按钮，长名称自动换行不会压到按钮。 */
  .sales-app table.tbl td:first-child {
    display: block; font-size: 15px; line-height: 1.45;
    padding: 0 64px 8px 0; margin-bottom: 5px; border-bottom: 1px dashed var(--border);
  }
  .sales-app table.tbl td:first-child::before { display: none; }
  /* 唯一的操作按钮：「复制」贴卡片右上角，拇指够得着。
     必须 width:auto —— 桌面那条 .op-col{width:1%} 会一起带下来，
     绝对定位后 1% 只有 4px 宽，按钮会从格子里溢出去、把整页撑出横向滚动。 */
  .sales-app table.tbl td.op-col {
    position: absolute; top: 10px; right: 12px; width: auto;
    display: block; padding: 0; border: 0;
  }
  .sales-app table.tbl td.op-col::before { display: none; }
  .sales-app table.tbl td.op-col .btn { min-height: 38px; padding: 7px 14px; font-size: 13px; }
  .sales-app .tbl-empty { padding: 34px 16px; }
  .sales-app .list-card .pager { border-top: 0; }

  /* 7) 分页：允许换行，两个按钮平分一行 */
  .sales-app .pager { flex-wrap: wrap; justify-content: space-between; gap: 9px; padding: 10px 2px 0; }
  .sales-app .pager .spacer { display: none; }
  .sales-app .pager .btn { flex: 1 1 40%; justify-content: center; min-height: 38px; }

  /* 8) 弹窗：窄屏下近似全屏，底部留安全区 */
  .sales-app .modal-mask { padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); }
  .sales-app .modal,
  .sales-app .modal.wide { max-width: none; border-radius: 12px; }
  .sales-app .modal-head { padding: 13px 14px; }
  .sales-app .modal-head h3 { font-size: 15px; }
  .sales-app .modal-head .x { font-size: 24px; padding: 0 8px; }
  .sales-app .modal-body { padding: 14px; }
  .sales-app .modal-foot { padding: 12px 14px; }
  .sales-app .modal-foot .btn { flex: 1; justify-content: center; min-height: 42px; }

  /* 9) 详情列表：128px 的标签列太占地方，改成「标签在上、值在下」 */
  .sales-app .dl { grid-template-columns: 1fr; font-size: 13.5px; }
  .sales-app .dl dt { border-bottom: 0; padding: 9px 0 2px; font-size: 12px; }
  .sales-app .dl dd {
    border-left: 0; padding: 0 0 10px; min-height: 0;
    display: block; word-break: break-word;
  }

  /* 10) toast 别顶到刘海，也别被窄屏切掉 */
  .sales-app .toast-wrap { top: calc(12px + env(safe-area-inset-top)); width: 100%; padding: 0 12px; }
  .sales-app .toast { max-width: none; font-size: 13px; }
}

/* ---------------------------------------------------- 手机（再窄一档）
   820 那档管「形态」，这一档只做进一步压缩，纯为挤空间。 */
@media (max-width: 640px) {

  .sales-app .sales-main { padding: 12px 10px calc(28px + env(safe-area-inset-bottom)); }

  /* 顶栏：去掉会被挤断的副标题，整体压扁 */
  .sales-app .sales-top {
    height: auto; min-height: 52px; gap: 8px; flex-wrap: nowrap;
    padding: 7px calc(10px + env(safe-area-inset-right)) 7px calc(10px + env(safe-area-inset-left));
  }
  .sales-app .sales-top .logo { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
  .sales-app .sales-top .ttl {
    font-size: 14px; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sales-app .sales-top .me { flex: none; font-size: 11.5px; line-height: 1.3; }
  .sales-app .sales-top .me b { font-size: 12.5px; }
}

/* ---------------------------------------------------- 触屏：干掉 hover 粘滞
   手机上点过的行会一直保持 :hover 高亮，看起来像被选中了，很迷惑。 */
@media (hover: none) {
  .sales-app table.tbl tbody tr:hover { background: #fff; }
  .sales-app .btn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text-mid); }
  .sales-app .btn-primary:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); color: #fff; }
  .sales-app .modal-head .x:hover { color: var(--muted); }
}