/* ============================================================
   douyin.css —— 抖音获客模块样式（独立文件）
   ------------------------------------------------------------
   约定：
     · 全部类名 dy- 前缀，只作用于 #dyPageToday / #dyPageLeads /
       #dyPageAccounts / #dyPageBonus / #dyPageReport 与 #dyModal
     · 不写任何表格固定宽（会压过手机端 mc-1/mc-2 卡片化）
   v1.1（20261031）：注释改为 375×812 实测口径（微信号 2 行，非单行）；样式零改动
     · 手机端只写 CSS 断点，不用 JS 判断宽度
   依赖：pc 端 .table-wrap 已在 layout.css / base.css 中定义
   ============================================================ */

/* ========== A. 页面骨架 ========== */
.dy-page{
  padding: 18px 20px 40px;
  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto;
}
.dy-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.dy-h3{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: .5px;
}
.dy-head-actions{ display: flex; gap: 8px; }

/* ========== B. 卡片 ========== */
.dy-card{
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 14px;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.dy-card-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  flex-wrap: wrap;
}
.dy-card-title{
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

/* ========== C. 表单字段 ========== */
.dy-fld{ margin: 0 0 12px; }
.dy-lbl{
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  margin: 0 0 5px;
  line-height: 1.6;
}
.dy-req{ color: #ef4444; margin-left: 2px; }
.dy-muted{
  color: #94a3b8;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}
.dy-input{
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #0f172a;
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.dy-input:focus{
  border-color: #2D6CDF;
  box-shadow: 0 0 0 3px rgba(45,108,223,.12);
}
.dy-textarea{ resize: vertical; min-height: 56px; font-family: inherit; }
.dy-val{ font-size: 13.5px; color: #0f172a; line-height: 1.7; }

/* 表单页：单列堆叠（今日录入） */
.dy-form{ max-width: 640px; }

/* ========== D. 按钮 ========== */
.dy-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  background: #f1f5f9;
  color: #334155;
  white-space: nowrap;
  transition: background .15s, border-color .15s, opacity .15s;
}
.dy-btn:hover{ opacity: .9; }
.dy-btn:disabled{ opacity: .45; cursor: not-allowed; }
.dy-btn-primary{ background: #2D6CDF; color: #fff; }
.dy-btn-ghost{ background: #fff; border-color: #d7dee8; color: #475569; }
.dy-btn-danger{ background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.dy-btn-warn{ background: #fffbeb; border-color: #fde68a; color: #b45309; }
.dy-btn-mini{ padding: 4px 10px; font-size: 12.5px; border-radius: 6px; }
.dy-btn-lg{ padding: 12px 20px; font-size: 15px; width: 100%; }

/* ========== E. 筛选条 ========== */
.dy-filters{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
}
.dy-filter{
  display: flex;
  flex-direction: column;
  min-width: 140px;
  flex: 0 0 auto;
}
.dy-filter-wide{ min-width: 200px; flex: 1 1 200px; }
.dy-filter-btn{
  flex-direction: row;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

/* ========== F. 表格 ========== */
.dy-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
}
.dy-table th,
.dy-table td{
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  line-height: 1.6;
}
.dy-table th{
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
}
.dy-table tbody tr:hover{ background: #fbfdff; }
.dy-table .dy-money{ font-variant-numeric: tabular-nums; font-weight: 600; color: #0f172a; }
/* 微信号可能很长且无空格，必须允许断行，否则两列卡片里会溢出 */
.dy-table .dy-wx{ word-break: break-all; overflow-wrap: anywhere; }
.dy-table .dy-detail{ word-break: break-word; min-width: 180px; }
.dy-table .dy-ops{ white-space: nowrap; }
.dy-table .dy-ops .dy-btn + .dy-btn{ margin-left: 6px; }

/* ========== G. 凭证缩略图 ========== */
.dy-thumbs{ display: flex; flex-wrap: wrap; gap: 6px; }
.dy-thumb{
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  cursor: zoom-in;
  display: block;
}
.dy-thumb-bad{
  display: inline-block;
  font-size: 11px;
  color: #ef4444;
  padding: 2px 6px;
  background: #fef2f2;
  border-radius: 4px;
}

/* ========== H. 上传 ========== */
.dy-upload{ display: flex; flex-direction: column; gap: 8px; }
.dy-upload-list{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dy-upload-item{ position: relative; display: inline-block; }
.dy-upload-item img{
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  display: block;
  cursor: zoom-in;
}
.dy-upload-x{
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.dy-upload-btn{ position: relative; overflow: hidden; cursor: pointer; }
.dy-file{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.dy-submit-bar{ margin-top: 4px; }

/* ========== I. 标签 ========== */
.dy-tag{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  white-space: nowrap;
}
.dy-tag-on{ background: #ecfdf5; color: #059669; }
.dy-tag-off{ background: #f8fafc; color: #94a3b8; }
.dy-tag-ban{ background: #fef2f2; color: #dc2626; }
.dy-tag-lock{ background: #eff6ff; color: #2563eb; }

/* ========== J. 分页 ========== */
.dy-pager{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 0 2px;
  flex-wrap: wrap;
}
.dy-pager-info{ font-size: 12.5px; color: #64748b; }

/* ========== K. 状态提示 ========== */
.dy-empty,
.dy-loading{
  text-align: center;
  padding: 22px 10px;
  color: #94a3b8;
  font-size: 13px;
}
.dy-error{
  padding: 12px 14px;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 13px;
  line-height: 1.7;
  margin: 6px 0;
}
.dy-error-msg{ font-weight: 600; }
.dy-error .dy-muted{ display: block; margin-top: 4px; color: #b91c1c; opacity: .8; }

/* ========== L. 看板子页签 ========== */
.dy-tabs{
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  border-bottom: 1px solid #eef2f7;
  padding-bottom: 0;
}
.dy-tab{
  padding: 9px 18px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.dy-tab.active{ color: #2D6CDF; border-bottom-color: #2D6CDF; }

/* ========== M. 报表统计卡 ========== */
.dy-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.dy-stat{
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.dy-stat-wide{ grid-column: span 2; }
.dy-stat-num{
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #2D6CDF;
  line-height: 1.3;
  word-break: break-all;
}
.dy-stat-lbl{
  display: block;
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 4px;
}

/* ========== N. 弹窗 ========== */
.dy-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(15,23,42,.45);
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.dy-modal.show{ display: flex; }
.dy-modal-box{
  background: #fff;
  border-radius: 14px;
  width: 520px;
  max-width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(15,23,42,.22);
  overflow: hidden;
}
.dy-modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #eef2f7;
}
.dy-modal-title{ margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; }
.dy-modal-x{
  cursor: pointer;
  color: #94a3b8;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  user-select: none;
}
.dy-modal-x:hover{ color: #ef4444; }
.dy-modal-body{ padding: 14px 16px; overflow-y: auto; }
.dy-modal-foot{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #eef2f7;
  background: #fcfdff;
}

/* ============================================================
   O. 手机端（≤768px）—— 只写 CSS，不做任何 JS 宽度判断
   ============================================================ */
@media (max-width: 768px){

  /* 底部留出 #mobileTabBar 的高度（实测 56px），否则最后一张卡片会被底栏盖住 */
  .dy-page{ padding: 12px 12px 72px; }
  .dy-h3{ font-size: 16px; }
  .dy-head{ margin-bottom: 10px; }

  .dy-card{ padding: 12px; border-radius: 10px; margin-bottom: 10px; }

  /* 输入框 16px：iOS 聚焦时不会自动放大页面。
     为什么必须 !important：既有 mobile-fix-v1.css 在 @media(max-width:1024px) 里已有
       input[type="text"],... input[type="date"],input[type="datetime-local"] { font-size:15px !important }
     （约 L1649-1662）。!important 压过任何特异性，不加 !important 无论怎么提选择器
     都拿不回 16px，iOS 仍会放大。此处 !important 只作用于抖音页与抖音弹窗内的
     .dy-input，不触碰任何既有页面。 */
  #mainPage .dy-page .dy-input,
  #dyModal .dy-modal-body .dy-input{ font-size: 16px !important; }
  .dy-input{ padding: 10px 11px; }
  .dy-lbl{ font-size: 13px; }

  /* 筛选条整体竖向堆叠，按钮横排换行 */
  .dy-filters{ flex-direction: column; align-items: stretch; gap: 8px; }
  .dy-filter{ min-width: 0; width: 100%; }
  .dy-filter-wide{ flex: 1 1 auto; }
  .dy-filter-btn{ flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .dy-filter-btn .dy-btn{ flex: 1 1 auto; }

  /* 提交按钮吸底，拇指可及。
     bottom 必须让开 #mobileTabBar（fixed，高 56px，z-index 9997）——
     用 bottom:0 会被底栏整块盖住，按钮看得见点不到。 */
  .dy-submit-bar{
    position: sticky;
    bottom: 56px;
    z-index: 5;
    padding: 8px 0 10px;
    background: linear-gradient(to top, #fff 70%, rgba(255,255,255,0));
  }

  .dy-form{ max-width: none; }

  .dy-tabs{ gap: 2px; }
  .dy-tab{ padding: 9px 12px; font-size: 13.5px; flex: 1 1 0; }

  .dy-stats{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dy-stat{ padding: 10px 8px; }
  .dy-stat-wide{ grid-column: span 2; }
  .dy-stat-num{ font-size: 17px; }

  .dy-modal{ padding: 0; align-items: flex-end; }
  .dy-modal-box{
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
  }
  .dy-modal-body{ padding: 12px; }
  .dy-modal-foot{ padding: 10px 12px; }
  .dy-modal-foot .dy-btn{ flex: 1 1 auto; }
}

/* ============================================================
   P. 明细台账 9/10 列 → mc-2 两列网格：微信号必须完整可读
   ------------------------------------------------------------
   mobile-v2.css 的 td::before 标签最多占 44%，剩余宽度给值。
   微信号 11+ 字符在 375px 的半列里必然溢出，此处强制断行。
   只作用于本页，不影响任何既有页面。
   ============================================================ */
@media (max-width: 768px){
  #dyPageLeads table.mc-2 td{
    word-break: break-all;
    overflow-wrap: anywhere;
  }
  /* 微信号独占整行（与 mobile-v2.css「操作列占满整行」同一手法）。
     375×812 实测：整行 277px，扣掉 ::before 标签（11.5px 字号、max-width 52%）
     后值区约 188px，30 位 wxid 排 2 行、单元格高 58px；31~33 位同样 2 行。
     原本不独占整行时半列只有 133px，值区约 60px，会被拆成 4 行以上——那才是要修的结果。
     注意：这里最终是【2 行】不是 1 行，别再拿「应该单行」当验收基线。 */
  #dyPageLeads table.mc-2 td.dy-wx{
    grid-column: 1 / -1;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: .2px;
  }
  /* 卡片内凭证缩略图略放大，便于肉眼确认 */
  #dyPageLeads table.mc-2 .dy-thumb{ width: 52px; height: 52px; }
}

/* ============================================================
   Q. 超小屏（≤480px）
   ============================================================ */
@media (max-width: 480px){
  .dy-page{ padding: 10px 10px 28px; }
  .dy-stat-num{ font-size: 16px; }
  .dy-table th,
  .dy-table td{ padding: 8px; }
}

/* ============================================================
   R. 话术SOP 电脑端瀑布流多列（手机端 ≤768px 保持单列不动）
   ------------------------------------------------------------
   用 CSS 多列（column-count）实现卡片瀑布流：
     · 卡片 #dySopList > .dy-sop-doc 高度不一，多列自动排列，天然瀑布流
     · break-inside: avoid 防止单张卡片被列拦腰截断
     · 加载中/空态/错误态用 column-span:all 拉通整行，避免被压成窄条
     断点：
     · ≥769px  2 列（用 769 而非 768，是避开既有 @media(max-width:768px)
       的 1px 重叠，确保手机端 ≤768px 完全保持单列现状）
     · ≥1280px 3 列
   ============================================================ */
@media (min-width: 769px){
  #dySopList{
    column-count: 2;
    column-gap: 16px;
  }
  #dySopList > .dy-loading,
  #dySopList > .dy-empty,
  #dySopList > .dy-error{
    column-span: all;
  }
  #dySopList > .dy-sop-doc{
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
  }
}
@media (min-width: 1280px){
  #dySopList{
    column-count: 3;
  }
}

/* ============================================================
   R. 今日录入：宽屏「新增录入」按钮 + 弹窗；手机单列直填不变
   ------------------------------------------------------------
   复用既有 .dy-modal / .dy-modal-box / .dy-modal-head /
   .dy-modal-body / .dy-modal-foot 弹窗样式，不重造轮子。
   内联表单（手机）与弹窗表单（宽屏）共用 dyTodayFormHtml()，
   仅通过 ID 前缀区分（dyToday / dyTodayModal），保证
   getElementById 不冲突。手机端仅写 CSS 断点，不做 JS 判宽。
   ============================================================ */

/* 字段栅格：默认单列（手机直填），宽屏切两列；整行字段跨满 */
.dy-today-grid{
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 14px;
}
.dy-today-grid .dy-fld-full{ grid-column: 1 / -1; }

/* 默认（手机）：隐藏「新增录入」按钮，内联表单直填 */
.dy-today-add{ display: none; }
.dy-today-inline{ display: block; }

/* 宽屏（≥769px）：显示「新增录入」按钮，隐藏内联表单（录入改走弹窗） */
@media (min-width: 769px){
  .dy-today-add{ display: inline-flex; }
  .dy-today-inline{ display: none; }
  .dy-today-grid{ grid-template-columns: 1fr 1fr; }
}