/* 慧光云品质管理 · 浅色主题层
 *
 * 用法：所有页面在业务 CSS 之后引本文件。
 * 本文件只做一件事——把深色体系的色值统一映射为浅色，
 * 靠 CSS 自定义属性 + 属性选择器实现，业务代码零改动。
 *
 * 为什么用变量而不是直接改 250+ 个色值：
 * 以后再要调亮/调暗/换主题，只改这张表，不用碰业务文件。
 *
 * 明度基准（WCAG 相对亮度感知）：
 *   页面底 #F4F7FB亮度 96　卡片 #FFFFFF 100　侧边栏 #FFFFFF 100
 *   主文字 #1E293B 亮度 23　次文字 #475569 亮度 38　弱文字 #64748B 亮度 46
 * 全部文字对底色对比度 ≥ 4.5:1（正文级）。
 */
:root{
  /* ---- 底色层：商务灰蓝（Slate），饱和度压低、色相统一，避免花哨 ---- */
  --hh-page:#F1F4F8;      /* 页面大底 冷灰蓝，比纯白沉稳 */
  --hh-surface:#FFFFFF;   /* 卡片 / 面板 纯白，与底色拉开层次 */
  --hh-surface-2:#F7F9FC; /* 次级面（表头、悬浮） */
  --hh-sidebar:#FFFFFF;   /* 侧边栏 */
  --hh-topbar:#FFFFFF;    /* 顶栏 */
  --hh-border:#D6DEE8;    /* 常规描边 冷灰蓝 */
  --hh-border-soft:#E7ECF2;/* 淡描边（行分隔） */

  /* ---- 文字层：统一用深蓝灰，不用纯黑（纯黑生硬） ---- */
  --hh-text:#16233A;      /* 标题 / 主文字  对底 14.3:1 */
  --hh-text-2:#3F4E63;    /* 正文 / 次要    对底  7.7:1 */
  --hh-text-3:#5A6B80;    /* 弱化说明      对底  5.0:1（AA 要 4.5）*/
  --hh-text-inv:#FFFFFF;  /* 深底上的反白字 */

  /* ---- 主色：藏青蓝，比 #1E5C99 更沉稳 ---- */
  --hh-primary:#1E5C99;
  --hh-primary-soft:#EDF3FA;

  /* ---- 语义色：全部压暗去荧光，保持专业感 ---- */
  --hh-ok:#0F6E4F;        /* 深松绿  5.7:1 */
  --hh-warn:#8A6534;      /* 赭石棕  S=45%  4.8:1 */
  --hh-dang:#B3261E;      /* 砖红    5.9:1 */
  --hh-info:#1E5C99;      /* 靛蓝    6.3:1 */

  /* ---- 阴影：更轻更收敛，商务风不要厚重投影 ---- */
  --hh-shadow:0 1px 2px rgba(22,35,58,.04),0 1px 3px rgba(22,35,58,.05);
  --hh-shadow-md:0 2px 6px rgba(22,35,58,.07);
  --hh-shadow-lg:0 6px 20px rgba(22,35,58,.10);
}

/* ================= 一、底色反转 ================= */
body{background:var(--hh-page)!important;color:var(--hh-text)}

/* 登录页 / 门户页：双栏布局各自有深底，需逐个覆盖 */
.lg,.lg{background:var(--hh-page)!important}
.lleft{background:var(--hh-surface)!important}
.lright{background:var(--hh-surface-2)!important}
.lwrap{background:var(--hh-page)!important}
/* 登录页内联样式里写死的深色块 */
.lcard,.lbox,.card-l,.login-card{background:var(--hh-surface)!important;
  border-color:var(--hh-border)!important;box-shadow:var(--hh-shadow-md)!important}
.li,.lg .field input,.lg input{background:var(--hh-surface)!important;
  color:var(--hh-text)!important;border-color:var(--hh-border)!important}
.li:focus,.lg input:focus{border-color:var(--hh-primary)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.12)!important}
.lg .lb,.lg .lt{color:var(--hh-text-3)!important}
.lg .h2,.lg h2,.lg h1{color:var(--hh-text)!important}
.lg .p,.lg p{color:var(--hh-text-2)!important}
.m{background:var(--hh-surface)!important;border-color:var(--hh-border)!important;
  box-shadow:var(--hh-shadow)}
.m h3{color:var(--hh-text)!important}
.m .d,.m .e{color:var(--hh-text-3)!important}
.m .mi{box-shadow:var(--hh-shadow)!important}
.lfoot{color:var(--hh-text-3)!important}

/* 登录页标题区：深底反白字 → 浅底深字 */
.ttl h1{color:var(--hh-text)!important}
.ttl h1 .brand{color:#164B7D!important}      /* 品牌词蓝，白底上要够深 */
.ttl h1 .mid{color:var(--hh-text)!important}
.ttl h1 em{background:linear-gradient(92deg,#1E5C99,#164B7D)!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important}
.ttl .en{color:var(--hh-text-3)!important}
.ttl .mk{box-shadow:var(--hh-shadow-md)!important}
.lead h2{color:var(--hh-text)!important}
.lead p{color:var(--hh-text-2)!important}
.mods .lb{color:var(--hh-text-3)!important}

/* 登录表单 */
.lform h3{color:var(--hh-text)!important}
.lform label{color:var(--hh-text-2)!important}
.lform input{color:var(--hh-text)!important}
.lform .tip{color:var(--hh-text-3)!important}
.lerr{color:var(--hh-dang)!important}

/* 角色选择卡 */
.pk{background:var(--hh-surface)!important;border-color:var(--hh-border)!important;
  box-shadow:var(--hh-shadow)}
.pk:hover{border-color:#8FAED0!important;background:var(--hh-primary-soft)!important}
.pk.on{border-color:var(--hh-primary)!important;background:#EDF3FA!important}
.pk.pro.on{border-color:#EC4899!important;background:#FDF2F8!important}
.pk .pn{color:var(--hh-text-3)!important}

/* 角色卡（另一套.pk2）*/
.pk2{background:var(--hh-surface)!important;border-color:var(--hh-border)!important;
  box-shadow:var(--hh-shadow)}
.pk2:hover{border-color:var(--c)!important;background:var(--hh-surface-2)!important}
.pk2.on{background:#EDF3FA!important;box-shadow:0 0 0 1px var(--c),var(--hh-shadow-md)!important}
.pk2 .pn{color:var(--hh-text)!important}
.pk2 .pe{color:var(--hh-info)!important}
.pk2 .pe.pro{color:#BE185D!important}

/* 模块图标底：白底上要浅色填充 + 淡描边 */
.m .mi{background:var(--hh-primary-soft)!important;
  border-color:var(--hh-border)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)!important}
.m.pro .mi{background:#F7E4EE!important}
.m.pro2 .mi{background:#DDEFE6!important}
.m.pro3 .mi{background:#FAF0DC!important}
.m.pro4 .mi{background:#EDF3FA!important}
.mi{border-color:var(--hh-border)!important;box-shadow:none!important}
.pkh{color:var(--hh-text-3)!important}
.mlock{color:var(--hh-text-3)!important}
.lbox{color:var(--hh-text-2)!important}
.lbox b{color:var(--hh-text)!important}
.lbox code{color:var(--hh-info)!important}

/* 原来写死的深底，统一换白 */
.shell{background:var(--hh-page)}
.sb,.tb{background:var(--hh-sidebar)}
.vs{background:var(--hh-surface);border-color:var(--hh-border)}
.vs-hd{background:var(--hh-surface-2);border-color:var(--hh-border-soft)}
.vs-ft{border-color:var(--hh-border-soft)}
.ht{background:var(--hh-text);border-color:var(--hh-border)}
.ht-lock{border-color:var(--hh-warn);color:var(--hh-warn)}
.mask{background:rgba(15,23,42,.45)}

/* 渐变深底卡（KPI / card / 统计卡 / 面板）→ 白底 + 浅描边 + 轻阴影 */
.kpi,.card,.sec,.pbk-c,.pbk-tile,.st,.rpt,.tbl,.pane{
  background:var(--hh-surface)!important;
  border-color:var(--hh-border)!important;
  box-shadow:var(--hh-shadow);
}
/* 面板内的次级块 */
.sec .sec,.card .card{background:var(--hh-surface-2)!important}

/* 表头 / 筛选条 / 分区标题条 */
th,.tabs2,.thead,.area>.ah,.pk .ph,.rk .rh{
  background:var(--hh-surface-2)!important;
  color:var(--hh-text-2)!important;
  border-color:var(--hh-border-soft)!important;
}

/* 行悬浮 */
table.tb tr:hover td{background:var(--hh-primary-soft)!important}
table.tb td{border-color:var(--hh-border-soft)!important;color:var(--hh-text-2)}
table.tb th{border-color:var(--hh-border)!important;color:var(--hh-text-3)}
.tb-sub,.kpi-ft{color:var(--hh-text-3)}

/* ================= 二、文字提亮 ================= */
/* 反白字（原本 #E8EEF7 / #F1F5F9 等浅色字）在白底上要变深 */
.tb-c,.hi-title,.kpi-vl,.card-ti,.sb-name,.tb-un,
.ni.on,.pbk-nm,.sec .ttl,.sb-name,th,td,.h2,.h3{
  color:var(--hh-text)!important;
}
.ni{color:var(--hh-text-2)!important}
.ni:hover{background:var(--hh-primary-soft)!important;color:var(--hh-text)!important}
.tb-p,.tb-ut,.sb-en,.sb-sec,.sb-f1,.sb-f2,.hi-sub,.kpi-lb,
.card-n,.empty,.sb-f1,.muted,.tb-sub{
  color:var(--hh-text-3)!important;
}
.tb-s{color:var(--hh-border)!important}
.tb-ut{color:var(--hh-text-3)!important}

/* 链接 / 操作 */
.link,.card-mo,.tb-view,.alert-mo{color:var(--hh-info)!important}
.tb-view{background:var(--hh-primary-soft)!important;border-color:#C7D8EA!important}
.tb-view:hover{background:#DCE7F3!important}
.tb-out{color:var(--hh-text-3)!important;border-color:var(--hh-border)!important}
.tb-out:hover{border-color:var(--hh-dang)!important;color:var(--hh-dang)!important}

/* ================= 三、语义色加深 ================= */
/* 状态标签：浅底上原来那些浅色字不够清晰，统一加深并改用淡底 */
.stg.wait{background:#FAF0DC!important;color:var(--hh-warn)!important}
.stg.doing{background:#DCE7F3!important;color:#164B7D!important}
.stg.over{background:#F8E4E2!important;color:var(--hh-dang)!important}
.stg.done{background:#DDEFE6!important;color:var(--hh-ok)!important}
.stg.pri{background:#FAF0DC!important;color:#92400E!important}
.ok{background:#DDEFE6!important;color:var(--hh-ok)!important}
.no{background:#F8E4E2!important;color:var(--hh-dang)!important}

/* 提示条 */
.alert{background:#FFFBEB!important;border-color:#E8D9B0!important}
.alert-ti{color:var(--hh-warn)!important}
.alert-bd{color:var(--hh-text-2)!important}
.note{background:var(--hh-primary-soft)!important;border-color:#C7D8EA!important;color:var(--hh-text-2)!important}
.warn{background:#FEF2F2!important;border-color:#E8C4C0!important;color:#991B1B!important}
.pbk-alert{background:#FEF2F2!important;border-color:#E8C4C0!important}
.pbk-alert .bd{color:#991B1B!important}
.pbk-alert .ic{background:#F8E4E2!important;color:var(--hh-dang)!important}
.pbk-alert b,.pbk-alert .bd b{color:#B91C1C!important}

/* 空状态 */
.empty{color:var(--hh-text-3)!important}

/* ================= 四、控件适配 ================= */
/* 按钮：主色实心保持，白底次要按钮加描边 */
.ftab{background:var(--hh-surface)!important;border-color:var(--hh-border)!important;color:var(--hh-text-2)!important}
.ftab:hover{border-color:#8FAED0!important;color:var(--hh-text)!important}
.ftab.on{background:var(--hh-primary)!important;border-color:var(--hh-primary)!important;color:#fff!important}
.tabs2 button{color:var(--hh-text-2)!important}
.tabs2 button.on{color:var(--hh-primary)!important;background:var(--hh-primary-soft)!important;
  border-bottom-color:var(--hh-primary)!important}

/* 蒙灰模块 */
.ni.lock{opacity:.45;filter:grayscale(.6)}
.ni.lock .nt{color:var(--hh-text-3)!important}
.lock-i{background:#E6EBF1!important;color:var(--hh-text-3)!important}
.ptag{background:#F7E4EE!important;color:#BE185D!important}

/* 客户验厂页签 */
.pbk-tab{background:var(--hh-surface)!important;border-color:var(--hh-border)!important;color:var(--hh-text-2)!important}
.pbk-tab:hover{border-color:var(--pc)!important;color:var(--hh-text)!important}
.pbk-tab.on{background:color-mix(in srgb,var(--pc) 10%,#fff)!important;border-color:var(--pc)!important;color:var(--hh-text)!important}
.pbk-tab .pn{color:var(--hh-text-3)!important}
.pbk-cb{background:var(--hh-surface)!important;border-color:var(--hh-border)!important;color:var(--hh-text-2)!important}
.pbk-cb.on-y{background:#DDEFE6!important;border-color:#6EE7B7!important;color:var(--hh-ok)!important}
.pbk-cb.on-n{background:#F8E4E2!important;border-color:#FCA5A5!important;color:var(--hh-dang)!important}
.pbk-cb.on-x{background:#E6EBF1!important;border-color:#CBD5E1!important;color:var(--hh-text-2)!important}
.pbk-no{background:#EEF2F7!important;color:var(--hh-text-3)!important}
.pbk-it.zero .pbk-no{background:#F8E4E2!important;color:var(--hh-dang)!important}
.pbk-doc,.pbk-pt,.pbk-na{color:var(--hh-text-3)!important}
.pbk-doc b,.pbk-pt b{color:var(--hh-text-2)!important}

/* 区域折叠块 */
.area{border-color:var(--hh-border)!important}
.area>.ah{background:var(--hh-surface-2)!important}
.area>.ah:hover{background:var(--hh-primary-soft)!important}
.area>.ah .nm{color:var(--hh-text)!important}
.area>.ah .sub{color:var(--hh-text-3)!important}
.area>.ah .rt{color:var(--hh-text-3)!important}
.it{border-top-color:var(--hh-border-soft)!important}
.it:hover{background:var(--hh-primary-soft)!important}
.it .tx{color:var(--hh-text-2)!important}
.it .cd{color:var(--hh-info)!important}

/* 评分徽标（0–5 分） */
.b0,.b1{background:#E6EBF1!important;color:var(--hh-text-3)!important}
.b2{background:#FAF0DC!important;color:var(--hh-warn)!important}
.b3{background:#DCE7F3!important;color:#164B7D!important}
.b4{background:#DDEFE6!important;color:var(--hh-ok)!important}

/* 图表底色（柱/环图容器） */
canvas,.chart{background:var(--hh-surface)!important}
.bar-track,.track{background:#E6EBF1!important}

/* 打印：保持白底黑字 */
@media print{
  body,.shell,.sb,.tb{background:#fff!important;color:#000!important}
  .sb,.tb,.ptag,.lock-i{display:none!important}
  .card,.kpi,.sec{box-shadow:none;border:1px solid #ccc!important}
}
/* ---------- 商务收敛：压暗业务 CSS 写死的亮蓝 ---------- */
/* 登录按钮 / logo / 标题渐变都是 #2563EB → #1D4ED8 这类高饱和蓝，
   属「互联网蓝」而非商务蓝。统一压到藏青体系，保留明度差维持立体感。 */
.lbtn{background:linear-gradient(140deg,#2A6DB0,#1E5C99)!important;
  box-shadow:0 2px 8px rgba(30,92,153,.24)!important}
.lbtn:hover{background:linear-gradient(140deg,#1E5C99,#164B7D)!important}
.ttl .mk{background:linear-gradient(140deg,#2A6DB0,#1E5C99)!important;
  box-shadow:0 4px 14px rgba(30,92,153,.28),inset 0 1px 0 rgba(255,255,255,.2)!important}
.ttl h1 em{background:linear-gradient(92deg,#2E7BB8,#1E5C99 60%,#164B7D)!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important}
.ttl h1 .brand{color:#2A6DB0!important}
/* 工作台主操作按钮：原橙褐改为统一藏青，商务更克制 */
.hi-btn{background:linear-gradient(140deg,#2A6DB0,#1E5C99)!important;
  box-shadow:0 2px 8px rgba(30,92,153,.24)!important}
.hi-btn:hover{filter:brightness(1.06)!important}
.sb-logo{background:linear-gradient(150deg,#2A6DB0,#1E5C99)!important;
  box-shadow:0 1px 6px rgba(30,92,153,.28)!important}

/* ---------- 内联 SVG 图标描边收敛 ---------- */
/* SVG 的 stroke 是 presentation attribute，CSS 可直接覆盖。
   原色 #60A5FA / #3B82F6 是高饱和亮蓝（互联网感），压到商务蓝体系。 */
.m .mi svg{stroke:#2A6DB0!important}
.m.pro .mi svg{stroke:#8A4A68!important}
.m.pro2 .mi svg{stroke:#0F6E4F!important}
.m.pro3 .mi svg{stroke:#8A6534!important}
.m.pro4 .mi svg{stroke:#1E5C99!important}
.ttl .mk svg{stroke:#FFFFFF!important}

/* ---------- 业务模块表格/统计卡映射补漏（2026-10-09 用户反馈） ----------
 * 症状：IPQC/IQC 巡检单号列几乎隐形（modules.css .canvas table td 用暗色主题
 * 浅灰蓝 #C3D0E0，浅底上对比度不足）；统计卡数字/表头/徽章同源发虚。
 * 根因：浅色主题上线时 .canvas 体系整块漏映射，本次补齐。 */

/* 容器与表格文字 */
.canvas{color:var(--hh-text-2)!important}
.canvas table td{color:var(--hh-text-2)!important;
  border-bottom:1px solid var(--hh-border-soft)!important}
.canvas table th{color:var(--hh-text-3)!important;
  border-bottom:1px solid var(--hh-border)!important}
/* 单号加粗列：继承 td 色，加粗即更醒目 */
.canvas table td b{color:var(--hh-text)!important}

/* 统计卡 */
.canvas .st{background:var(--hh-surface)!important;
  border:1px solid var(--hh-border)!important;box-shadow:var(--hh-shadow)!important}
.canvas .st .lb{color:var(--hh-text-3)!important}
.canvas .st .vl{color:var(--hh-text)!important}
.canvas .st .vl span{color:var(--hh-text-3)!important}

/* 卡片标题与次级按钮 */
.canvas .sec{background:var(--hh-surface)!important;
  border:1px solid var(--hh-border)!important}
.canvas .sec>.ttl{color:var(--hh-text)!important}
.canvas .sec>.ttl .n,.canvas .sec>.ttl span.n{color:var(--hh-text-3)!important}
.canvas .btn.g{background:var(--hh-surface-2)!important;color:var(--hh-text-2)!important;
  border:1px solid var(--hh-border)!important;box-shadow:none!important}

/* 徽章/状态色：浅色语义底（对应 modules.css 暗色 rgba 底） */
.no{color:var(--hh-dang)!important;font-weight:600}
.canvas .b,.canvas .b0,.canvas .b1{background:#EDF0F4!important;color:var(--hh-text-3)!important}
.canvas .b2{background:#F5EEDF!important;color:var(--hh-warn)!important}
.canvas .b3{background:var(--hh-primary-soft)!important;color:var(--hh-info)!important}
.canvas .b4{background:#E5F3EC!important;color:var(--hh-ok)!important}