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

  /* ---- 文字层 ---- */
  --hh-text:#1E293B;      /* 标题 / 主文字  对底 13.6:1 */
  --hh-text-2:#475569;    /* 正文 / 次要    对底  7.1:1 */
  --hh-text-3:#5B6B82;    /* 弱化说明      对底  5.1:1（AA 要 4.5）*/
  --hh-text-inv:#FFFFFF;  /* 深底上的反白字 */

  /* ---- 主色 ---- */
  --hh-primary:#2563EB;
  --hh-primary-soft:#EFF6FF;

  /* ---- 语义色（浅底上需加深才够对比）---- */
  --hh-ok:#047857;        /* 绿 */
  --hh-warn:#B45309;      /* 琥珀 */
  --hh-dang:#C81E1E;      /* 红    对底 5.3:1 */
  --hh-info:#0369A1;      /* 天蓝 */

  /* ---- 阴影 ---- */
  --hh-shadow:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06);
  --hh-shadow-md:0 2px 8px rgba(15,23,42,.08);
  --hh-shadow-lg:0 8px 28px rgba(15,23,42,.12);
}

/* ================= 一、底色反转 ================= */
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:#1D4ED8!important}      /* 品牌词蓝，白底上要够深 */
.ttl h1 .mid{color:var(--hh-text)!important}
.ttl h1 em{background:linear-gradient(92deg,#2563EB,#1D4ED8)!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:#93C5FD!important;background:var(--hh-primary-soft)!important}
.pk.on{border-color:var(--hh-primary)!important;background:#EFF6FF!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:#EFF6FF!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:#FDF2F8!important}
.m.pro2 .mi{background:#F0FDF4!important}
.m.pro3 .mi{background:#FFF7ED!important}
.m.pro4 .mi{background:#EFF6FF!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:#BFDBFE!important}
.tb-view:hover{background:#DBEAFE!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:#FEF3C7!important;color:var(--hh-warn)!important}
.stg.doing{background:#DBEAFE!important;color:#1D4ED8!important}
.stg.over{background:#FEE2E2!important;color:var(--hh-dang)!important}
.stg.done{background:#D1FAE5!important;color:var(--hh-ok)!important}
.stg.pri{background:#FEF3C7!important;color:#92400E!important}
.ok{background:#D1FAE5!important;color:var(--hh-ok)!important}
.no{background:#FEE2E2!important;color:var(--hh-dang)!important}

/* 提示条 */
.alert{background:#FFFBEB!important;border-color:#FDE68A!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:#BFDBFE!important;color:var(--hh-text-2)!important}
.warn{background:#FEF2F2!important;border-color:#FECACA!important;color:#991B1B!important}
.pbk-alert{background:#FEF2F2!important;border-color:#FECACA!important}
.pbk-alert .bd{color:#991B1B!important}
.pbk-alert .ic{background:#FEE2E2!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:#93C5FD!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:#E2E8F0!important;color:var(--hh-text-3)!important}
.ptag{background:#FCE7F3!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:#D1FAE5!important;border-color:#6EE7B7!important;color:var(--hh-ok)!important}
.pbk-cb.on-n{background:#FEE2E2!important;border-color:#FCA5A5!important;color:var(--hh-dang)!important}
.pbk-cb.on-x{background:#E2E8F0!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:#FEE2E2!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:#E2E8F0!important;color:var(--hh-text-3)!important}
.b2{background:#FEF3C7!important;color:var(--hh-warn)!important}
.b3{background:#DBEAFE!important;color:#1D4ED8!important}
.b4{background:#D1FAE5!important;color:var(--hh-ok)!important}

/* 图表底色（柱/环图容器） */
canvas,.chart{background:var(--hh-surface)!important}
.bar-track,.track{background:#E2E8F0!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}
}