/* ============================================================
   企业定制化CRM管理系统  补充样式
   （基础设计系统在 style.css 里，这里只加本系统特有的组件）
   ============================================================ */

/* ---------------------------------------------------------- 通用小标签 */
.tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 20px;
    font-size: 12px;
    line-height: 18px;
    background: #f3f4f6;
    color: #4b5563;
    white-space: nowrap;
    vertical-align: middle;
}
.tag-red    { background: #fee2e2; color: #991b1b; }
.tag-orange { background: #fef3c7; color: #92400e; }
.tag-green  { background: #dcfce7; color: #166534; }
.tag-blue   { background: #dbeafe; color: #1e40af; }
.tag-off    { background: #f3f4f6; color: #9ca3af; }

/* 复选框 + 文字同行 */
.cbox { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.cbox input { width: auto; }

/* 只用来承载 form 元素，不占视觉空间 */
.hidden-forms { display: none; }

/* ---------------------------------------------------------- 完成率配色 */
.tx-full { color: var(--c-ok); font-weight: 600; }
.tx-mid  { color: #0891b2; font-weight: 600; }
.tx-low  { color: var(--c-warn); font-weight: 600; }
.tx-zero { color: #9ca3af; }

/* 进度条 */
.pb {
    height: 8px;
    background: #eef2f7;
    border-radius: 6px;
    overflow: hidden;
    min-width: 80px;
}
.pb-fill { height: 100%; border-radius: 6px; background: #cbd5e1; }
.pb-fill.pb-zero { background: #e5e7eb; }
.pb-fill.pb-low  { background: #fbbf24; }
.pb-fill.pb-mid  { background: #38bdf8; }
.pb-fill.pb-full { background: #22c55e; }

/* ---------------------------------------------------------- 今日任务行 */
.period-head {
    font-weight: 600;
    color: var(--c-sub);
    font-size: 13px;
    margin: 18px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--c-line);
}
.period-head:first-of-type { margin-top: 6px; }

.task-row {
    border: 1px solid var(--c-line);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff;
    transition: background .15s;
}
.task-row.is-done { background: #f7fdf9; border-color: #bbe7c9; }

.task-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.task-chk {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.task-chk.on { background: var(--c-ok); border-color: var(--c-ok); }
span.task-chk { cursor: default; }

.task-main { flex: 1 1 260px; min-width: 0; }
.task-name { font-weight: 600; }
.task-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.task-remark { color: var(--c-warn); font-size: 12px; }

.task-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-num { width: 76px !important; text-align: center; }
.task-remark-input { width: 190px !important; }

.task-linked {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--c-line);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}
.linked-item { font-size: 13px; }
.linked-item .muted { margin-left: 4px; }

/* ------------------------------------------------- 内联「记录联系」抽屉 */
details.quick { display: inline-block; position: relative; }
details.quick > summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
    padding: 5px 12px;
    border-radius: 7px;
    border: 1px solid var(--c-line);
    background: #fff;
    color: var(--c-main);
    font-size: 12px;
}
details.quick > summary::-webkit-details-marker { display: none; }
details.quick[open] > summary { background: var(--c-main-l); }
.quick-form {
    position: absolute;
    z-index: 40;
    right: 0;
    top: 105%;
    width: 300px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

/* --------------------------------------------------------- 周矩阵表 */
table.list.matrix th, table.list.matrix td { text-align: center; }
table.list.matrix th:first-child, table.list.matrix td:first-child { text-align: left; }
.th-today { background: #eff6ff; }
.td-today { background: #f8fbff; }

/* --------------------------------------------------------- 月度日历 */
.cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
.cal-h {
    text-align: center;
    font-size: 12px;
    color: var(--c-sub);
    padding: 4px 0;
    font-weight: 600;
}
.cal-cell {
    display: block;
    min-height: 66px;
    border-radius: 8px;
    padding: 6px 7px;
    border: 1px solid var(--c-line);
    background: #fff;
    color: var(--c-txt);
    text-decoration: none;
}
a.cal-cell:hover { border-color: var(--c-main); text-decoration: none; }
.cal-empty { background: transparent; border: 0; min-height: 0; }
.cal-d { font-size: 12px; font-weight: 600; color: var(--c-sub); }
.cal-v { font-size: 15px; font-weight: 700; margin-top: 2px; }
.cal-s { font-size: 11px; color: var(--c-sub); }
.cal-future { background: #fafbfc; }
.cal-future .cal-d { color: #cbd5e1; }
.cal-today { border-color: var(--c-main); box-shadow: 0 0 0 2px var(--c-main-l); }

.cal-cell.lv0 { background: #f8fafc; }
.cal-cell.lv1 { background: #dcfce7; }
.cal-cell.lv2 { background: #a7f3c9; }
.cal-cell.lv3 { background: #5fd68f; }
.cal-cell.lv4 { background: #22a35b; color: #fff; }
.cal-cell.lv3 .cal-d, .cal-cell.lv3 .cal-s,
.cal-cell.lv4 .cal-d, .cal-cell.lv4 .cal-s { color: rgba(255, 255, 255, .85); }
.cal-cell.lv4 .cal-v { color: #fff; }

.cal-mini { min-height: 18px; width: 26px; display: inline-block; padding: 0; }
.cal-legend { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------ 登录页 */
.login-head { text-align: center; margin-bottom: 18px; }
.login-title { font-size: 19px; font-weight: 700; }
.login-sub { color: var(--c-sub); font-size: 13px; margin-top: 4px; }

/* ------------------------------------------------------------ 个人进度 */
.task-list { display: block; }

/* 个人事项：左侧一条彩色提示线，和工作任务区分开 */
.task-row.accent-blue { border-left: 3px solid #60a5fa; }
.task-row.accent-blue.is-done { border-left-color: var(--c-ok); }
.task-row.accent-pink { border-left: 3px solid #f9a8d4; }
.task-row.accent-pink.is-done { border-left-color: var(--c-ok); }

/* 计数型里不需要勾选（必须填数字）的占位图标 */
.task-chk-na {
    border-style: dashed;
    color: #cbd5e1;
    background: #f8fafc;
    cursor: default;
    font-size: 18px;
}

/* 工作台上「本周运动/阅读」的紧凑汇总 */
.wk-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--c-line);
    font-size: 13px;
}
.wk-item { display: inline-flex; align-items: center; gap: 6px; }

/* 每周目标卡片 */
.wk-card {
    border: 1px solid var(--c-line);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    background: #fff;
}
.wk-card.is-done { background: #f7fdf9; border-color: #bbe7c9; }
.wk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.wk-num { font-size: 13px; white-space: nowrap; }
.wk-num b { font-size: 17px; }
.wk-bar { margin: 8px 0; }
.wk-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.wk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 12px;
    background: #f3f4f6;
    color: #4b5563;
}
.wk-chip.on { background: #dcfce7; color: #166534; }
.wk-x {
    border: 0;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}
.wk-x:hover { color: #dc2626; }
.wk-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--c-line);
}
.fld-inline { display: inline-flex; align-items: center; gap: 5px; }
.fld-inline > label { font-size: 12px; color: var(--c-sub); white-space: nowrap; }
.fld-inline input[type="date"] { width: 148px; }

/* 任务表里的下拉：收窄左右内边距，否则窄列会把「每日 / 上午」这类文字截断 */
#taskTable select { padding-left: 6px; padding-right: 3px; }

/* -------------------------------------------------- 设置页任务行（高级参数） */
table.list tr.row-sub > td {
    border-top: 0 !important;
    padding-top: 0 !important;
    background: #fafbfc;
}
.sub-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items: center;
    font-size: 13px;
    padding: 6px 0 10px;
}
.sub-row label { font-size: 12px; color: var(--c-sub); }

/* 月任务 / 逾期行 */
tr.row-warn > td { background: #fff7f7; }

/* ------------------------------------------------------- 任务自定义字段 */
.task-fields {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--c-line);
}
.task-fields .fld-inline input[type="text"] { width: 132px; }
.task-fields .fld-inline input[type="date"] { width: 148px; }
.task-fields .fld-inline select { min-width: 84px; }
.req { color: #dc2626; margin-left: 2px; }

/* ------------------------------------------------------- 子项勾选条
   （营销平台的 8 个平台：每个子项一个独立小表单，点一下即勾/反勾） */
.subitems {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--c-line);
}
.subitems-label { font-size: 12px; color: var(--c-sub); margin-right: 2px; }
.subitems-label b { font-size: 14px; }
.subitem-form { display: inline; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--c-line);
    background: #fff;
    color: #4b5563;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    line-height: 18px;
}
.chip:hover { border-color: var(--c-main); color: var(--c-main); }
.chip i {
    font-style: normal;
    width: 12px;
    display: inline-block;
    text-align: center;
    color: var(--c-ok);
    font-weight: 700;
}
/* 子项自己一套配色，不沿用 .task-row.is-done 的完成底色 */
.chip.on { background: #dcfce7; border-color: #86efac; color: #166534; }

/* ------------------------------------------------- 设置页字段编辑器 */
.fields-editor {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: flex-start;
    padding: 8px 0 4px;
    border-top: 1px dashed var(--c-line);
    margin-top: 4px;
}
.fields-editor > label { font-size: 12px; color: var(--c-sub); padding-top: 4px; }
.field-rows { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.field-row select { width: 92px; }
.field-actions { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* 个人进度页「每周目标」里的字段行 */
.wk-fields { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; flex: 1 1 100%; }
.wk-fields .fld-inline input[type="text"] { width: 132px; }
.wk-fields .fld-inline input[type="date"] { width: 148px; }

@media (max-width: 900px) {
    .cal-cell { min-height: 54px; }
    .quick-form { width: 260px; }
}
@media (max-width: 560px) {
    .cal-cell { min-height: 46px; padding: 4px; }
    .cal-v { font-size: 12px; }
    .cal-s { display: none; }
    .task-side { width: 100%; }
    .task-remark-input { width: 100% !important; }
}

/* ---------- 客户列表：按「导入表格自带的列」筛选 ---------- */
.xfilter { margin-top: 6px; border-top: 1px dashed var(--c-line); }
.xfilter > summary {
    cursor: pointer; padding: 10px 12px; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 6px; list-style: none;
}
.xfilter > summary::-webkit-details-marker { display: none; }
.xfilter > summary::before { content: "\25B8"; color: var(--c-sub); }
.xfilter[open] > summary::before { content: "\25BE"; }
.xfilter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 14px;
    padding: 2px 12px 0;
}
.xfilter-grid .fld { display: flex; flex-direction: column; gap: 4px; }
.xfilter-grid .fld label { font-size: 12px; color: var(--c-sub); }
.xfilter-grid input, .xfilter-grid select { width: 100%; }

/* 客户列表：显示哪些列 */
.colset-title {
    padding: 8px 12px 2px; font-size: 12px; font-weight: 600; color: var(--c-sub);
}
.colset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px 12px;
    padding: 4px 12px 0;
}
.colset-grid .cbox { font-size: 13px; }

/* ---------- 「这次不做」（×）：点了就从完成率分母里去掉 ---------- */
.task-skip {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px dashed #d1d5db;
    background: #fff;
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.task-skip:hover { border: 1px solid var(--c-err); color: var(--c-err); }
.task-skip.on { background: var(--c-err); border: 1px solid var(--c-err); color: #fff; }

.task-row.is-skip { background: #f9fafb; border-style: dashed; }
.task-row.is-skip .task-name { color: #9ca3af; }
.task-row.is-skip .task-meta { opacity: .8; }

.wk-card.is-skip { background: #f9fafb; }
.wk-card.is-skip .wk-bar { opacity: .3; }

.tx-skip { color: var(--c-err); font-weight: 600; }

.cal-cell { position: relative; }
.cal-x {
    position: absolute;
    top: 1px;
    right: 4px;
    font-size: 11px;
    font-style: normal;
    color: var(--c-err);
    opacity: .85;
    line-height: 1;
}

/* ---------- 工作台：临时添加工作任务 ---------- */
/* ---------- 工作台：临时新增工作任务（独立卡片，常驻展开） ---------- */
.qa-card .filter {
    padding: 0;
    border: none;
    background: transparent;
    margin-bottom: 2px;
}
.qa-card .filter .fld { margin-bottom: 0; }

.qa-note { padding: 0 0 8px; line-height: 1.7; }

.qa-new {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 0 2px;
    border-top: 1px dotted var(--c-line);
}
.qa-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 9px;
    border-radius: 12px;
    background: #eef2ff;
    border: 1px solid #dbe3ff;
    font-size: 12px;
    color: #334155;
}
.qa-x {
    width: 17px;
    height: 17px;
    line-height: 1;
    padding: 0;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 13px;
    cursor: pointer;
    border-radius: 50%;
}
.qa-x:hover { background: var(--c-err); color: #fff; }

/* ---------- 工作台的左右两栏：到期表格适配半栏宽度 ---------- */
/* table.list 全局 min-width:720px，在 50% 宽的栏里会把「操作」列裁掉，这里放开并收紧内边距 */
.split .table-wrap table.list { min-width: 0; }
.split .table-wrap table.list th,
.split .table-wrap table.list td { padding-left: 8px; padding-right: 8px; }

/* ---------- 营销管理 · 软文标题库 ---------- */
.split2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 900px) {
    .split2 { grid-template-columns: minmax(0, 1fr); }
}

.kw-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0;
}
.kw-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 5px 4px 11px;
    border-radius: 14px;
    background: var(--c-main-l);
    border: 1px solid #dbe3ff;
    font-size: 13px;
}
.kw-chip a { color: var(--c-main-d); text-decoration: none; }
.kw-chip.off { opacity: .45; }
.kw-x {
    width: 18px;
    height: 18px;
    line-height: 1;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    font-size: 13px;
    cursor: pointer;
}
.kw-x:hover { background: var(--c-err); color: #fff; }

/* 半栏里的表单改成竖排：flex 横排在半栏宽度下会挤成一团 */
.split2 > form { display: block; }
/* 两栏之间来一条竖线，免得把右栏的「批量导入」看成左栏的字段 */
.split2 > form + form { border-left: 1px dashed var(--c-line); padding-left: 18px; }
@media (max-width: 900px) {
    .split2 > form + form { border-left: none; padding-left: 0; border-top: 1px dashed var(--c-line); padding-top: 14px; }
}
.split2 > form .fld { min-width: 0; width: 100%; margin-bottom: 10px; }
.split2 > form .fld input[type=text],
.split2 > form .fld input[type=file],
.split2 > form .fld select { width: 100%; box-sizing: border-box; }
.import-form input[type=file] { font-size: 13px; padding: 6px 8px; background: #fff; }

.code-area {
    width: 100%;
    box-sizing: border-box;
    font-family: Consolas, Menlo, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.65;
    padding: 10px 12px;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    background: #fbfcfe;
    resize: vertical;
}

/* ---------- 营销管理 · 标题采集 ---------- */
.split2 > .split-col { min-width: 0; }
.split2 > .split-col + .split-col {
    border-left: 1px dashed var(--c-line);
    padding-left: 18px;
}
@media (max-width: 900px) {
    .split2 > .split-col + .split-col {
        border-left: none; padding-left: 0;
        border-top: 1px dashed var(--c-line); padding-top: 14px;
    }
}
/* 采集源 / 采集记录：列多，给小屏留出横向滚动，别把单元格挤成竖排 */
table.src-list { min-width: 880px; }
table.log-list { min-width: 760px; }
table.src-list td .mono { font-size: 11px; color: var(--c-sub); word-break: break-all; }
table.log-list td { vertical-align: top; }
table.log-list td.nowrap { white-space: nowrap; }

/* 「推荐源」一行胶囊 */
.preset-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: -4px 0 14px;
}
.preset-row .kw-chip { padding: 4px 11px; }

/* 采集规则说明 */
.rule-list { margin: 0; padding-left: 20px; line-height: 1.9; font-size: 13px; }
.rule-list li { margin-bottom: 2px; }
.rule-list code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; }

/* ---------- 营销管理 · 关键词融合示例 ---------- */
.fuse-demo {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px dashed var(--c-line);
    border-radius: 8px;
    background: #fbfcfe;
}
.fuse-title { font-size: 13px; margin-bottom: 8px; color: var(--c-sub); }
.fuse-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fuse-table td { padding: 4px 6px; vertical-align: top; }
.fuse-table td:nth-child(2) { color: var(--c-sub); }
.fuse-table td.ar { color: var(--c-sub); width: 18px; text-align: center; }
.fuse-table b { color: var(--c-main-d); }
@media (max-width: 720px) {
    .fuse-table td:nth-child(2) { display: none; }
    .fuse-table td.ar { display: none; }
}