/* ==========================================================
   Cordys CRM 主题覆盖包 v1 —— 「工业数据台」
   适配：Vue 3 + Naive UI + Tailwind（192.168.2.103:8081）
   主张：把装饰性药丸降权，全页只留一处强调色（熔橙），
        产品编码用等宽字体，让它像编号而不是按钮
   ----------------------------------------------------------
   装法（任选）：
   ① Stylus/油猴：粘贴本文件，域名填 192.168.2.103:8081 —— 零改动、随时回滚
   ② 静态目录：放到站点根目录，在 index.html 的 </head> 前加
      <link rel="stylesheet" href="/cordys-crm-theme.css">
   ========================================================== */

:root {
  /* 唯一强调色 */
  --qi-melt: #E8590C;
  --qi-melt-hover: #C94A08;
  --qi-melt-soft: #FDEFE6;

  /* 墨青正文与层级灰 */
  --qi-ink: #16394A;
  --qi-slate: #5C7480;
  --qi-paper: #F5F7F6;
  --qi-line: #E2E8E6;
  --qi-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* 把原厂青绿主色换成墨青（Naive 变量被 app CSS 引用） */
  --primary-8: #16394A;
  --primary-0: #0F2C3A;
  --primary-1: #1D465A;
  --primary-2: #2E5A70;
  --primary-3: #46748C;
  --primary-4: #8FAAB6;
  --primary-5: #C3D3D9;
  --primary-6: #E1E9EC;
  --primary-7: #F1F5F6;
}

/* ── 1. 表格：安静的表头、清晰的横线 ─────────────────── */
.n-data-table-th {
  background-color: var(--qi-paper) !important;
  border-top-color: var(--qi-line) !important;
  border-bottom-color: var(--qi-line) !important;
  color: var(--qi-slate) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
.n-data-table-thead .n-data-table-tr:not(.n-data-table-tr--summary):hover {
  background-color: var(--qi-paper) !important;
}
.n-data-table-td {
  border-bottom: 1px solid var(--qi-line) !important;
}
.n-data-table-tr:hover > .n-data-table-td {
  background-color: #FAFBFA !important;
}
.n-data-table { font-size: 14px !important; }

/* ── 2. 采购产品 / 客户类型：实心药丸 → 白底细描边等宽码 ── */
.n-data-table .n-tag,
.n-tag {
  background-color: #FFFFFF !important;
  border: 1px solid var(--qi-line) !important;
  color: var(--qi-ink) !important;
  border-radius: 5px !important;
  height: 22px !important;
  line-height: 20px !important;
  padding: 0 7px !important;
  font-family: var(--qi-mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
.n-tag__border { border: 1px solid var(--qi-line) !important; }
.n-tag .n-tag__content { max-width: 160px !important; }

/* 只有真正需要抢眼的状态才上熔橙（如重点客户/逾期） */
.n-tag--error-type,
.n-tag.n-tag--warning-type {
  background-color: var(--qi-melt-soft) !important;
  border-color: #F7D9C4 !important;
  color: var(--qi-melt) !important;
}

/* ── 3. 操作列：三颗实心按钮 → 三条文字链接 ───────────── */
.n-data-table-td .n-button {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--qi-slate) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  height: 22px !important;
  padding: 0 2px !important;
  min-width: 0 !important;
}
.n-data-table-td .n-button:hover { color: var(--qi-ink) !important; }

/* 每行的第一个动作（跟进）用熔橙 */
.n-data-table-td .n-button:first-child {
  color: var(--qi-melt) !important;
  font-weight: 500 !important;
}
.n-data-table-td .n-button:first-child:hover { color: var(--qi-melt-hover) !important; }
.n-data-table-td .n-button .n-button__border,
.n-data-table-td .n-button .n-button__state-border { border-color: transparent !important; }

/* ── 4. 客户名称：可点击就做成链接 ───────────────────── */
.n-data-table-td a {
  color: var(--qi-ink) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
}
.n-data-table-td a:hover {
  color: var(--qi-melt) !important;
  border-bottom-color: var(--qi-melt) !important;
}

/* ── 5. 工具栏按钮：只保留一个实心主按钮 ───────────────── */
.n-button--primary-type:not(.n-btn-outline-primary) {
  background-color: var(--qi-ink) !important;
  border-color: var(--qi-ink) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
}
.n-button--primary-type:not(.n-btn-outline-primary):not(:disabled):hover {
  background-color: #0F2C3A !important;
  border-color: #0F2C3A !important;
}
.n-button--default-type {
  border-color: var(--qi-line) !important;
  color: var(--qi-ink) !important;
  border-radius: 8px !important;
}
.n-button--default-type:not(:disabled):hover {
  border-color: var(--qi-slate) !important;
  color: var(--qi-ink) !important;
}
.n-button { border-radius: 8px !important; }

/* ── 6. 导航与分页：选中态用熔橙细条，不用整块高亮 ─────── */
.n-menu-item-content--selected::before,
.n-menu-item-content--selected .n-menu-item-content-header {
  color: var(--qi-ink) !important;
  font-weight: 600 !important;
}
.n-menu-item-content--selected::before {
  content: "";
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; background: var(--qi-melt); border-radius: 0 2px 2px 0;
}
.n-pagination-item--active {
  background-color: var(--qi-ink) !important;
  border-color: var(--qi-ink) !important;
  color: #FFFFFF !important;
}

/* ── 7. 无障碍基线 ───────────────────────────────────── */
:focus-visible { outline: 2px solid var(--qi-melt) !important; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}