* { margin:0; padding:0; box-sizing:border-box; }
:root {
  color-scheme: dark;
  --bg:#0F172A; --panel:#1E293B; --panel2:#24344D; --border:#334155;
  --txt:#E2E8F0; --muted:#94A3B8; --blue:#3B82F6; --blue2:#60A5FA;
  --cyan:#22D3EE; --green:#34D399; --red:#F87171; --orange:#FBBF24;

  --input-bg:#0B1220;
  --detail-bg:#182237;
  --badge-bg:#1E3A8A;

  --card-bg: linear-gradient(180deg,#212E46 0%,#171F33 100%);
  --card-border:#2D3C58;
  --card-hi: rgba(255,255,255,.07);
  --card-shadow: inset 0 1px 0 var(--card-hi), 0 1px 2px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.30);
  --card-shadow-hover: inset 0 1px 0 var(--card-hi), 0 2px 4px rgba(0,0,0,.4), 0 14px 28px rgba(0,0,0,.42);
  --nav-hover-bg: linear-gradient(180deg,#263450,#1E293B);
  --nav-hover-border:#334155;
  --nav-active-bg: linear-gradient(180deg,#4B8BFA,#2563EB);
  --nav-active-border:#3B82F6;
  --nav-active-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 5px 12px rgba(37,99,235,.42);

  --c-muted:#94A3B8; --c-label:#E2E8F0; --c-white:#F8FAFC;
  --c-axis:#475569; --c-grid:#1E293B; --c-border:#334155;
  --c-primary:#8B5CF6; --c-blue:#3B82F6; --c-red:#F87171; --c-green:#34D399; --c-cyan:#22D3EE; --c-orange:#FBBF24;
  --c-detail:#182237; --c-input:#0B1220;
}

[data-theme="violet"] {
  color-scheme: light;
  --bg:#F6F5F8; --panel:#FFFFFF; --panel2:#F2EEF6; --border:#E4DDEB;
  --txt:#24182F; --muted:#72687E; --blue:#673B92; --blue2:#673B92;
  --cyan:#397C98; --green:#2E7D5B; --red:#C83F49; --orange:#B56B1E;

  --input-bg:#FFFFFF;
  --detail-bg:#FAF8FB;
  --badge-bg:#EDE5F3;

  --card-bg: linear-gradient(180deg,#FFFFFF 0%,#FAF8FB 100%);
  --card-border:#E4DDEB;
  --card-hi: rgba(255,255,255,1);
  --card-shadow: 0 1px 2px rgba(58,37,76,.06), 0 8px 20px rgba(58,37,76,.10);
  --card-shadow-hover: 0 2px 4px rgba(58,37,76,.08), 0 14px 28px rgba(58,37,76,.16);
  --nav-hover-bg: linear-gradient(180deg,#FAF8FB,#F2EEF6);
  --nav-hover-border:#D8CEE1;
  --nav-active-bg: linear-gradient(180deg,#7D4EA5,#673B92);
  --nav-active-border:#673B92;
  --nav-active-shadow: 0 3px 8px rgba(103,59,146,.25);

  --c-muted:#72687E; --c-label:#24182F; --c-white:#24182F;
  --c-axis:#A89CAF; --c-grid:#E4DDEB; --c-border:#D8CEE1;
  --c-primary:#673B92; --c-blue:#673B92; --c-red:#C83F49; --c-green:#2E7D5B; --c-cyan:#397C98; --c-orange:#B56B1E;
  --c-detail:#FAF8FB; --c-input:#FFFFFF;
}

[data-theme="light"] {
  color-scheme: light;
  --bg:#F1F5F9; --panel:#FFFFFF; --panel2:#E2E8F0; --border:#E2E8F0;
  --txt:#0F172A; --muted:#64748B; --blue:#2563EB; --blue2:#3B82F6;
  --cyan:#0891B2; --green:#059669; --red:#DC2626; --orange:#D97706;

  --input-bg:#FFFFFF;
  --detail-bg:#F8FAFC;
  --badge-bg:#DBEAFE;

  --card-bg: linear-gradient(180deg,#FFFFFF 0%,#EEF2F7 100%);
  --card-border:#E2E8F0;
  --card-hi: rgba(255,255,255,1);
  --card-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 20px rgba(15,23,42,.10);
  --card-shadow-hover: 0 2px 4px rgba(15,23,42,.08), 0 14px 28px rgba(15,23,42,.16);
  --nav-hover-bg: linear-gradient(180deg,#F1F5F9,#E2E8F0);
  --nav-hover-border:#CBD5E1;
  --nav-active-bg: linear-gradient(180deg,#3B82F6,#2563EB);
  --nav-active-border:#2563EB;
  --nav-active-shadow: 0 3px 8px rgba(37,99,235,.25);

  --c-muted:#64748B; --c-label:#0F172A; --c-white:#0F172A;
  --c-axis:#94A3B8; --c-grid:#E2E8F0; --c-border:#CBD5E1;
  --c-primary:#673B92; --c-blue:#2563EB; --c-red:#DC2626; --c-green:#059669; --c-cyan:#0891B2; --c-orange:#D97706;
  --c-detail:#F8FAFC; --c-input:#FFFFFF;
}
html,body { height:100%; }
body { font-family:"Microsoft YaHei","PingFang SC",sans-serif; background:var(--bg); color:var(--txt); }
button { cursor:pointer; }
input,select { padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; outline:none; background:var(--input-bg); color:var(--txt); }
input:focus,select:focus { border-color:var(--blue); }
select option { background:var(--panel); }
input[type="date"] { min-width:135px; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor:pointer; }
input[type="date"]::-webkit-datetime-edit { color:var(--txt); }
[data-theme="violet"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }

/* ---------- 登录 ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(1200px 600px at 30% 20%, #1E3A8A66, transparent), var(--bg); }
.login-card { width:360px; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:40px 36px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.login-logo { font-size:28px; font-weight:700; text-align:center; letter-spacing:2px; color:var(--blue2); }
.login-sub { text-align:center; color:var(--muted); margin:8px 0 28px; font-size:13px; }
.form-item { margin-bottom:14px; }
.form-item input { width:100%; background:var(--input-bg); }
.login-err { color:var(--red); font-size:13px; min-height:18px; margin-bottom:8px; text-align:center; }
.btn-primary { width:100%; padding:10px; border:none; border-radius:6px; background:var(--blue); color:#fff; font-size:15px; }
.btn-primary:hover { filter:brightness(1.08); }
.btn-primary.small { width:auto; padding:8px 18px; font-size:13px; }
.btn-ghost { padding:7px 14px; border:1px solid var(--border); border-radius:6px; background:transparent; color:var(--txt); font-size:13px; }
.btn-ghost:hover { border-color:var(--blue); color:var(--blue2); }
.btn-ghost.small { padding:7px 14px; font-size:13px; }
.btn-ghost.block { display:block; width:100%; margin:6px 0 0; }

/* ---------- 布局 ---------- */
.app { display:flex; min-height:100vh; }
.sidebar { position:sticky; top:0; width:210px; height:100vh; overflow-y:auto; flex-shrink:0; background:var(--panel); border-right:1px solid var(--border); padding:18px 12px; display:flex; flex-direction:column; }
.logo { padding:0 2px 18px; color:var(--blue2); font-size:19px; font-weight:800; letter-spacing:0; white-space:nowrap; }
.logo span { color:inherit; }
.nav-group { font-size:12px; color:var(--muted); padding:6px 10px; }
.nav { flex:1; }
.nav-item { display:block; padding:11px 14px; border-radius:8px; color:var(--txt); font-size:14px; margin-bottom:6px; cursor:pointer; border:1px solid transparent; transition:all .15s ease; white-space:nowrap; }
.nav-item:hover { background:var(--nav-hover-bg); border-color:var(--nav-hover-border); box-shadow:inset 0 1px 0 var(--card-hi); }
.nav-item.active { background:var(--nav-active-bg); color:#fff; font-weight:600; border-color:var(--nav-active-border); box-shadow:var(--nav-active-shadow); }
.nav-first10k { border-top:1px solid var(--border); margin-top:8px; padding-top:14px; }
.nav-kpicenter { border:1px solid var(--border); border-radius:8px; margin-bottom:10px; padding-top:11px; background:var(--panel2); }
.kc-cat { font-size:14px; font-weight:700; color:var(--blue2); margin:14px 0 6px; }
.kc-cat:first-child { margin-top:0; }
.kc-cat .muted { font-weight:400; }
#kpiCenter .panel { margin-bottom:14px; }
.kc-sec .chart { margin-bottom:10px; }

/* ---------- 质量中台 MP 工序链×基地矩阵 + 热力图配置 ---------- */
.kc-mp-head { flex-wrap:wrap; gap:8px; }
.kc-heat-settings { display:flex; align-items:center; gap:6px; flex-wrap:wrap; flex-shrink:0; font-size:12px; }
.kc-heat-settings .muted { font-size:12px; }
.kc-heat-switch { display:flex; align-items:center; gap:5px; cursor:pointer; color:var(--txt); font-size:13px; user-select:none; white-space:nowrap; }
.kc-heat-switch input { width:15px; height:15px; accent-color:var(--blue); cursor:pointer; }
.heat-input { width:52px; padding:4px 6px; border:1px solid var(--border); border-radius:5px; background:var(--input-bg); color:var(--txt); font-size:12px; text-align:center; }
.kc-mp table { min-width:560px; }
.table-wrap.kc-mp th, .table-wrap.kc-mp td { text-align:center; }
.table-wrap.kc-mp td:first-child, .table-wrap.kc-mp th:first-child { text-align:left; }
.kc-mp td.kc-cell { min-width:74px; text-align:center; }
.kc-mp td.kc-cell.kc-cell-stack { min-width:118px; padding:3px 6px; vertical-align:top; }
.kc-mp td.kc-cell.heat.g0 { background:rgba(52,211,153,.20); }
.kc-mp td.kc-cell.heat.g1 { background:rgba(251,191,36,.22); }
.kc-mp td.kc-cell.heat.g2 { background:rgba(248,113,113,.30); }
.kc-mp td.kc-cell.worst { box-shadow:inset 0 0 0 2px var(--c-red); }
.kc-mp .kc-bv { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:1px 6px; border-radius:4px; font-size:12px; line-height:1.6; margin:1px 0; }
.kc-mp .kc-bv .kc-bn { color:var(--muted); font-size:11px; white-space:nowrap; }
.kc-mp .kc-bv.heat.g0 { background:rgba(52,211,153,.20); }
.kc-mp .kc-bv.heat.g1 { background:rgba(251,191,36,.22); }
.kc-mp .kc-bv.heat.g2 { background:rgba(248,113,113,.30); }
.kc-mp .kc-bv.worst { box-shadow:inset 0 0 0 2px var(--c-red); }
.kc-mp .kc-bv.majb { color:var(--c-orange); font-weight:600; }
.kc-mp .kc-bv.kc-pending { color:var(--muted); font-style:italic; }
.kc-pending-txt { color:var(--muted); font-size:11px; font-style:italic; }

/* ---------- 质量中台 4 大板块 Tab ---------- */
.kc-tabs-wrap { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.kc-mode-badge { padding:4px 12px; border-radius:12px; font-size:12px; font-weight:600; border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
.kc-mode-badge.demo { color:var(--c-orange); border-color:rgba(251,191,36,.4); background:rgba(251,191,36,.10); }
.kc-mode-badge.real { color:var(--c-green); border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.10); }
.kc-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.kc-tab { padding:9px 16px; font-size:14px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--muted); cursor:pointer; transition:all .15s ease; text-align:center; line-height:1.25; }
.kc-tab:hover { border-color:var(--blue); color:var(--txt); }
.kc-tab-zh { display:block; font-size:11px; font-weight:400; color:var(--muted); margin-top:2px; }
.kc-tab.active { background:var(--blue); color:#fff; border-color:var(--blue); font-weight:600; box-shadow:0 4px 12px rgba(59,130,246,.3); }
.kc-tab.active .kc-tab-zh { color:rgba(255,255,255,.8); }
.kc-sub-filter { display:flex; gap:10px; align-items:flex-end; flex-shrink:0; }
.kc-sub-filter .f-item { flex-direction:column; gap:4px; }
.kc-sub-filter .f-item select { min-width:110px; }
.kc-mp table .kc-rowname { text-align:left; font-weight:600; min-width:150px; max-width:230px; }
.kc-mp table .kc-rowname .muted { white-space:normal; line-height:1.4; font-weight:400; }
.kc-mp tr.kc-mp-sep td { padding:1px; border-bottom:none; }
.kc-mp tr.kc-mp-sep td::before { content:''; display:block; border-top:1px dashed var(--border); }
.kc-mp tr.kc-mp-avg td { font-weight:700; border-top:2px solid var(--border); }
.kc-tms-sec td { background:var(--panel2); font-weight:600; color:var(--blue2); text-align:left; border-bottom:1px solid var(--border); }
.sidebar-foot { border-top:1px solid var(--border); padding-top:10px; }

/* ---------- 供应商审核 TMS Audit ---------- */
.kpi-card .audit-unit { font-size:12px; color:var(--muted); margin-left:2px; font-weight:400; }
.kc-flash { animation: kcFlash 1.4s ease; }
@keyframes kcFlash { 0%, 100% { box-shadow: none; } 25%, 65% { box-shadow: 0 0 0 2px var(--blue2), 0 0 26px rgba(59,130,246,.55); } }
.kc-audit-card { padding:14px 12px; }
.kc-audit-card .num { font-size:26px; }
.kc-audit-card .num .unit { font-size:12px; color:var(--muted); margin-left:2px; }
.audit-badge { display:inline-block; margin-top:6px; padding:2px 10px; border-radius:10px; font-size:11px; font-weight:600; }
.audit-badge.green { background:rgba(52,211,153,.18); color:var(--c-green); }
.audit-badge.yellow { background:rgba(251,191,36,.18); color:var(--c-orange); }
.audit-badge.red { background:rgba(248,113,113,.20); color:var(--c-red); }
.audit-goal { font-size:11px; color:var(--blue2); margin-top:4px; }
.audit-note { font-size:11px; color:var(--c-orange); margin-top:4px; line-height:1.4; text-align:left; }
.kc-sub { padding:12px; }
.kc-cat-label { font-size:13px; font-weight:700; color:var(--blue2); margin:14px 0 8px; }
.kc-cat-row + .kc-cat-row { margin-top:12px; }
.kc-item-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.kc-item-tab { padding:4px 14px; font-size:12px; border:1px solid var(--border); border-radius:14px; background:var(--input-bg); color:var(--muted); cursor:pointer; }
.kc-item-tab:hover { border-color:var(--blue); color:var(--txt); }
.kc-item-tab.active { background:var(--blue); color:#fff; border-color:var(--blue); font-weight:600; }
.kc-gate-select { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.kc-gate-btn { padding:8px 16px; font-size:13px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--muted); cursor:pointer; }
.kc-gate-btn .muted { font-size:11px; }
.kc-gate-btn:hover { border-color:var(--blue); color:var(--txt); }
.kc-gate-btn.active { background:var(--blue); color:#fff; border-color:var(--blue); font-weight:600; box-shadow:0 4px 12px rgba(59,130,246,.3); }
.kc-gate-btn.active .muted { color:rgba(255,255,255,.8); }
.kc-audit-insight { margin-top:12px; background:var(--panel2); border:1px dashed var(--border); border-radius:8px; padding:10px 14px; }
.kc-insight-title { font-size:12px; font-weight:600; color:var(--blue2); margin-bottom:6px; }
.kc-insight-row { font-size:12px; color:var(--txt); line-height:1.9; }
.kc-insight-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }

.main { flex:1; padding:16px 20px 24px; min-width:0; }

/* ---------- 顶部筛选 ---------- */
.topbar { position:sticky; top:0; z-index:40; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; background:var(--bg); }
.filters { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px 14px; flex:1; }
.f-item { display:flex; flex-direction:column; gap:5px; }
.f-item label { font-size:12px; color:var(--muted); }
.f-item .sep { color:var(--muted); }
.f-item select { min-width: 96px; max-width: 150px; }
.f-item input[type="text"] { width: 130px; }
.btn-row { display:flex; gap:8px; align-items:flex-end; flex-shrink:0; }
.multi-dd-btn { min-width: 130px; max-width: 200px; }
.seg { display:flex; background:var(--input-bg); border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.seg-btn { padding:7px 12px; font-size:13px; color:var(--muted); cursor:pointer; border-right:1px solid var(--border); }
.seg-btn:last-child { border-right:none; }
.seg-btn.active { background:var(--blue); color:#fff; }
.topbar-right { display:flex; align-items:center; gap:10px; padding-top:8px; }
.data-mode-control { display:flex; align-items:center; gap:4px; padding:4px; border:1px solid var(--border); border-radius:8px; background:var(--panel); white-space:nowrap; }
.data-mode-label { padding:0 5px; font-size:12px; color:var(--muted); }
.data-mode-btn { border:0; border-radius:5px; background:transparent; color:var(--muted); font-size:12px; line-height:28px; padding:0 8px; cursor:pointer; }
.data-mode-btn.active { background:var(--blue); color:#fff; font-weight:700; }
.data-mode-btn:hover { color:var(--txt); }
.data-mode-status { display:none; margin-left:4px; padding:2px 6px; border-radius:10px; font-size:11px; font-weight:700; }
.data-mode-status.mock { display:inline-block; color:#8a5b00; background:#fff2d8; }
.data-mode-status.real { display:inline-block; color:#0d7552; background:#dbf7ea; }
.mock-data-watermark { display:none; pointer-events:none; position:fixed; inset:0; z-index:55; overflow:hidden; opacity:.12; color:#6b3b9a; font-weight:800; font-size:22px; letter-spacing:1px; }
.mock-data-watermark.visible { display:flex; align-items:center; justify-content:space-around; transform:rotate(-28deg) scale(1.25); }
.mock-data-watermark span { white-space:nowrap; }
.uname { font-size:14px; }
.dashboard-user { display:inline-flex; align-items:center; min-height:28px; padding:4px 10px; border:1px solid var(--border); border-radius:14px; background:var(--panel); color:var(--txt); font-size:13px; font-weight:600; line-height:1; white-space:nowrap; }
.dashboard-user::before { content:""; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--green); }
.role-badge { background:var(--badge-bg); color:var(--blue2); border-radius:10px; padding:2px 10px; font-size:12px; }
.btn-back-top { position:fixed; right:24px; bottom:24px; z-index:70; min-width:108px; height:40px; padding:0 14px; border:1px solid var(--border); border-radius:20px; background:var(--panel); color:var(--blue2); box-shadow:0 8px 24px rgba(34,24,46,.18); font-size:13px; font-weight:700; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .16s,transform .16s,visibility .16s; }
.btn-back-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.btn-back-top:hover { border-color:var(--blue2); background:var(--panel2); }

/* ---------- 主题切换 ---------- */
.theme-dd { position:relative; flex-shrink:0; }
.theme-btn { padding:7px 12px; border:1px solid var(--border); border-radius:6px; background:var(--input-bg); color:var(--txt); font-size:13px; cursor:pointer; }
.theme-btn:hover { border-color:var(--blue); }
.theme-panel { position:absolute; top:100%; right:0; margin-top:6px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:6px; z-index:60; box-shadow:0 8px 24px rgba(0,0,0,.5); min-width:140px; }
.theme-item { display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:13px; color:#FFFFFF; cursor:pointer; border-radius:6px; white-space:nowrap; }
[data-theme="violet"] .theme-item,
[data-theme="light"] .theme-item { color:#0F172A; }
.theme-item:hover { background:var(--panel2); }
.theme-item .sw { width:18px; height:18px; border-radius:50%; border:2px solid var(--txt); flex-shrink:0; }
.sw-dark { background:#3B82F6; }
.sw-violet { background:#673B92; }
.sw-light { background:#FFFFFF; }

/* ---------- KPI ---------- */
.kpi-row { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:14px; }
.kpi-row-2 { grid-template-columns:repeat(2,1fr); }
.kpi-row-3 { grid-template-columns:repeat(3,1fr); }
.kpi-row-4 { grid-template-columns:repeat(4,1fr); }
.kpi-row-5 { grid-template-columns:repeat(5,1fr); }
.kpi-card {
  --accent: var(--blue); --glow: rgba(59,130,246,.25);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.kpi-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 12px;
  background: radial-gradient(140% 70% at 50% -10%, var(--glow), transparent 65%);
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.kpi-card.blue  { --accent: var(--c-blue); --glow: rgba(59,130,246,.28); }
.kpi-card.red   { --accent: var(--c-red); --glow: rgba(239,68,68,.26); }
.kpi-card.green { --accent: var(--c-green); --glow: rgba(16,185,129,.24); }
.kpi-card.cyan  { --accent: var(--c-cyan); --glow: rgba(6,182,212,.24); }
.kpi-card.orange{ --accent: var(--c-orange); --glow: rgba(245,158,11,.24); }
.kpi-card.purple{ --accent:#A78BFA; --glow: rgba(139,92,246,.26); }
.kpi-card .lbl { font-size:12px; color:var(--muted); letter-spacing:.5px; }
.kpi-card .num { font-size:28px; font-weight:700; margin-top:8px; color:var(--accent); text-shadow: 0 0 18px var(--glow); }
.kpi-card .kpi-tag { display:inline-block; margin-top:8px; font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.5px; padding:1px 10px; border:1px solid var(--border); border-radius:9px; }
.kpi-card.sim .num { color:var(--c-orange); text-shadow: 0 0 18px rgba(245,158,11,.24); }
.kpi-card .sub { font-size:11px; color:var(--muted); margin-top:3px; }
.kpi-card.kpi-click { cursor:pointer; }
.kpi-card.kpi-click .lbl { color:var(--accent); }
.kpi-card.active { box-shadow: 0 0 0 2px var(--blue2), 0 0 22px rgba(59,130,246,.45); border-color:var(--blue2); }

/* ---------- 图表 ---------- */
.grid-2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.grid-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px; min-width:0; }
.panel-wide { grid-column:1 / -1; }
.panel-title { font-size:14px; font-weight:600; color:var(--txt); margin-bottom:10px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; min-width:0; }
.panel-head .panel-title { margin-bottom:0; }
.chart-pager { display:flex; align-items:center; flex-shrink:0; overflow:hidden; border:1px solid var(--border); border-radius:6px; background:var(--input-bg); }
.chart-pager button { min-height:26px; padding:3px 9px; border:0; border-right:1px solid var(--border); background:transparent; color:var(--muted); font-size:11px; cursor:pointer; }
.chart-pager button:last-child { border-right:0; }
.chart-pager button:hover:not(:disabled) { background:var(--panel2); color:var(--blue2); }
.chart-pager button:disabled { opacity:.35; cursor:default; }
.view-switch { display:flex; background:var(--input-bg); border:1px solid var(--border); border-radius:6px; overflow:hidden; flex-shrink:0; }
.vs-btn { padding:4px 10px; font-size:12px; color:var(--muted); background:transparent; border:none; border-right:1px solid var(--border); cursor:pointer; }
.vs-btn:last-child { border-right:none; }
.vs-btn:hover { color:var(--txt); }
.vs-btn.active { background:var(--blue); color:#fff; }
.kpi-table { max-height:360px; overflow:auto; }
.kpi-table th.sortable { cursor:pointer; user-select:none; }
.kpi-table th.sortable:hover { color:var(--blue2); }
.kpi-table th .arrow { color:var(--blue2); font-size:11px; }
.kpi-table td.bad { color:var(--red); font-weight:600; }
.kpi-table td.good { color:var(--green); font-weight:600; }
.chart { height:360px; width:100%; min-width:0; }
.chart.small { height:260px; }
.chart.kc-compact { height:200px; }
.dash-meta { margin-top:14px; font-size:12px; color:var(--muted); }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x:auto; max-width:100%; min-width:0; }
.table-wrap table { width:100%; border-collapse:collapse; font-size:13px; }
.table-wrap th, .table-wrap td { border-bottom:1px solid var(--border); padding:8px 10px; text-align:right; white-space:nowrap; }
.table-wrap th { color:var(--muted); font-weight:600; }
.table-wrap td:first-child, .table-wrap th:first-child { text-align:left; }
.table-wrap tr:hover td { background:var(--panel2); }
.table-wrap .num-red { color:var(--c-red); font-weight:600; }
.table-wrap .cell-ellipsis { max-width:220px; overflow:hidden; text-overflow:ellipsis; }

/* IQC：退货批次卡点击 → 明细表闪烁提示 */
@keyframes iqcFlash { 0%,100%{ background:transparent; } 30%{ background:rgba(248,113,113,.25); } }

/* 报废明细分页 */
.scrap-pager { display:flex; align-items:center; gap:10px; }
.scrap-page-size { min-width:96px; padding:5px 8px; border:1px solid var(--border); border-radius:6px; background:var(--input-bg); color:var(--txt); font-size:12px; }
.audit-filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.audit-filters input, .audit-filters select { padding:5px 8px; border:1px solid var(--border); border-radius:6px; background:var(--input-bg); color:var(--txt); font-size:12px; }

/* 报废：下钻查看月份提示条 */
.scrap-drill-bar { display:flex; align-items:center; gap:14px; background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.35); border-radius:8px; padding:9px 16px; margin-bottom:12px; font-size:13px; color:var(--label); animation:drillBarGlow 2s ease-in-out infinite; }
@keyframes drillBarGlow { 0%,100%{ background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.35); box-shadow:0 0 0 0 rgba(59,130,246,0); } 50%{ background:rgba(59,130,246,.2); border-color:rgba(59,130,246,.6); box-shadow:0 0 16px rgba(59,130,246,.28); } }
#scrapDrillRestore {
  background:linear-gradient(135deg,#3B82F6,#2563EB);
  color:#fff; border:none; border-radius:8px; padding:9px 24px;
  font-size:14px; font-weight:700; letter-spacing:.5px; cursor:pointer; flex-shrink:0;
  animation:drillPulse 1.5s ease-in-out infinite, drillFloat 2.4s ease-in-out infinite;
}
#scrapDrillRestore:hover { filter:brightness(1.12); }
@keyframes drillPulse {
  0%,100%{ box-shadow:0 0 0 0 rgba(59,130,246,.6), 0 4px 14px rgba(37,99,235,.5); }
  50%{ box-shadow:0 0 0 12px rgba(59,130,246,0), 0 4px 14px rgba(37,99,235,.5); }
}
@keyframes drillFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
.panel-head-switches { display:flex; align-items:center; gap:8px; }

/* ---------- 缺陷明细展开 ---------- */
.dt-toggle { color:var(--cyan); cursor:pointer; font-size:14px; user-select:none; padding:0 4px; }
.dt-detail td { background:var(--detail-bg); }
.dt-total td { font-weight:700; background:var(--panel2); }
.dt-top5 { display:flex; flex-direction:column; gap:6px; padding:6px 10px; }
.dt-bar { display:flex; align-items:center; gap:10px; }
.dt-name { width:200px; color:var(--txt); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dt-track { flex:1; height:14px; background:var(--input-bg); border-radius:7px; overflow:hidden; }
.dt-fill { display:block; height:100%; background:linear-gradient(90deg,#F87171,#FBBF24); border-radius:7px; }
.dt-val { width:130px; color:var(--muted); font-size:12px; text-align:right; }
.dt-bar2 { display:flex; align-items:center; gap:8px; }
.dt-pct { color:var(--txt); font-size:12px; min-width:44px; text-align:right; }
.tag-ok { color:var(--c-green); font-weight:600; }
.tag-ng { color:var(--c-red); font-weight:600; }
.majb { color:var(--c-orange); font-weight:600; }
.minv { color:var(--c-cyan); font-weight:600; }

/* ---------- 多选下拉 ---------- */
.multi-dd { position:relative; }
.multi-dd-btn { min-width:120px; padding:8px 12px; border:1px solid var(--border); border-radius:6px; background:var(--input-bg); color:var(--txt); font-size:13px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.multi-dd-btn:hover { border-color:var(--blue); }
.multi-dd-panel { position:absolute; top:100%; left:0; margin-top:4px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:8px; max-height:240px; overflow-y:auto; min-width:160px; z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.multi-dd-actions { display:flex; gap:10px; padding-bottom:6px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.date-panel-row { display:flex; align-items:center; gap:6px; padding:6px 0 8px; }
.date-panel-row span { color:var(--muted); font-size:12px; }
.date-panel-row input { width:130px; }
.multi-dd-actions a { color:var(--blue2); font-size:12px; cursor:pointer; }
.multi-dd-item { display:flex; align-items:center; gap:6px; padding:4px 6px; font-size:13px; color:var(--txt); cursor:pointer; border-radius:4px; }
.multi-dd-item:hover { background:var(--panel2); }
.multi-dd-item input { margin:0; }
#productDd input { width:140px; }
#productPanel { min-width:240px; max-height:320px; }
#productPanel .multi-dd-item { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#productPanel .muted { flex-shrink:0; }

/* ---------- 弹窗 ---------- */
.modal { position:fixed; inset:0; background:rgba(2,6,23,.7); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal-box { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:28px; width:380px; }
.modal-box.wide { width:720px; }
.modal-title { font-size:17px; font-weight:700; margin-bottom:18px; }
.muted { color:var(--muted); font-weight:400; font-size:12px; }
.user-add-row { display:flex; gap:8px; margin-bottom:14px; }
.user-add-row input { flex:1; }
.user-list { display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow-y:auto; padding-right:2px; }
.u-card { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); }
.u-main { flex:1; min-width:0; }
.u-name { font-size:14px; font-weight:600; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.u-role { font-size:11px; color:var(--blue2); border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-weight:400; }
.u-role-admin { color:var(--orange); border-color:rgba(251,191,36,.4); }
.u-off { font-size:11px; color:var(--red); font-weight:400; }
.u-sub { font-size:12px; color:var(--muted); margin-top:3px; }
.u-actions { display:flex; gap:6px; flex-wrap:wrap; flex-shrink:0; }
.u-btn { padding:6px 10px; font-size:12px; border:1px solid var(--border); border-radius:6px; background:transparent; color:var(--blue2); cursor:pointer; }
.u-btn:hover { border-color:var(--blue); }
.u-btn-danger { color:var(--red); }
.perm-row { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); }
.perm-label { font-size:13px; color:var(--txt); white-space:nowrap; padding-top:2px; }
.perm-checks { display:flex; flex-wrap:wrap; gap:6px 14px; flex:1; }
.perm-checks label { font-size:13px; color:var(--txt); display:flex; align-items:center; gap:4px; cursor:pointer; }
.perm-checks input { margin:0; }
.perm-row .muted { font-size:12px; align-self:center; }
.hqclist { margin-top:12px; max-height:260px; overflow-y:auto; }
.hqclist-item { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-bottom:1px solid var(--border); font-size:13px; }
.hqclist-item a { color:var(--red); cursor:pointer; font-size:12px; }

/* ---------- 退货明细展开 ---------- */
.rj-toggle { color:var(--cyan); cursor:pointer; font-size:14px; user-select:none; padding:0 4px; }
.rj-detail td { background:var(--detail-bg); }
.rj-defects { display:flex; flex-wrap:wrap; gap:6px 12px; padding:8px 10px; align-items:center; }
.rj-def-head { font-size:12px; color:var(--muted); }
.rj-def { font-size:12px; color:var(--txt); background:var(--panel2); padding:2px 8px; border-radius:4px; white-space:nowrap; }

/* 退货明细弹窗：加宽，从左侧菜单右侧延伸，不压左侧工序名 */
#modalReject { justify-content: flex-start; }
#modalReject .modal-box {
  width: auto;
  flex: 1 1 auto;
  margin: 0 16px 0 226px;
  max-width: none;
  padding: 20px 18px;
}
#modalReject .table-wrap { max-height: calc(100vh - 150px) !important; }

/* ---------- 数据导入 ---------- */
.import-drop { border:2px dashed var(--border); border-radius:10px; padding:26px; text-align:center; color:var(--muted); cursor:pointer; transition:.15s; }
.import-drop:hover, .import-drop.drag { border-color:var(--blue); color:var(--txt); background:var(--panel2); }
.import-drop-txt { font-size:13px; }
.import-list { margin:12px 0; max-height:180px; overflow-y:auto; }
.import-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-bottom:1px solid var(--border); font-size:13px; }
.import-item span:first-child { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.import-item .muted { flex-shrink:0; }
.import-del { color:var(--blue2); cursor:pointer; flex-shrink:0; }
.import-actions { display:flex; gap:10px; margin-top:12px; }
.import-result { margin-top:12px; padding:12px; background:var(--input-bg); border:1px solid var(--border); border-radius:8px; font-size:12px; max-height:300px; overflow-y:auto; white-space:pre-wrap; color:var(--txt); }

@media (min-width: 901px) and (max-width: 1439px) {
  body.quality-cockpit-active .logo { padding-left:0; padding-right:0; font-size:16px; }
}

@media (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar { position:static; width:100%; height:auto; overflow:visible; padding:10px 12px; }
  #modalReject { justify-content: center; }
  #modalReject .modal-box { width: calc(100% - 24px); flex: none; margin: 0; padding: 16px 12px; }
  .logo { padding: 0 4px 8px; font-size: 20px; }
  .nav-group { display: none; }
  .nav { display: flex; flex-direction: row; overflow-x: auto; gap: 6px; flex: none; -webkit-overflow-scrolling: touch; }
  .nav-item { flex: 0 0 auto; white-space: nowrap; padding: 8px 14px; margin-bottom: 0; }
  .nav-first10k { border-top: none; margin-top: 0; padding-top: 0; border-left: 1px solid var(--border); padding-left: 14px; }
  .sidebar-foot { display: flex; flex-direction: row; gap: 6px; border-top: none; padding-top: 8px; }
  .sidebar-foot .btn-ghost.block { width: auto; margin: 0; }
  .main { padding: 12px; }
  .topbar { flex-direction: column; gap: 8px; }
  .filters { width: 100%; }
  .topbar-right { padding-top: 0; }
  .kpi-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

@media (max-width: 600px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi-card { padding: 12px 8px; }
  .kpi-card .num { font-size: 20px; }
  .kpi-card .lbl { font-size: 11px; }
  .chart { height: 250px; }
  .panel { padding: 12px; }
  .panel-title { font-size: 13px; }
  .login-card { width: calc(100% - 36px); max-width: 360px; padding: 28px 20px; }
  .modal-box { width: calc(100% - 24px); max-height: 92vh; overflow-y: auto; padding: 20px 16px; }
  .modal-box.wide { width: calc(100% - 24px); }
  .user-add-row { flex-direction: column; }
  .user-add-row input, .user-add-row select { width: 100%; }
  .user-add-row .btn-primary.small, .user-add-row .btn-ghost.small { width: 100%; }
  .perm-row { flex-direction: column; gap: 8px; }
  .perm-row .muted { align-self: flex-start; }
  .perm-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; }
  .perm-checks label { padding: 8px 10px; background: var(--panel2); border-radius: 6px; font-size: 14px; }
  .perm-checks input { width: 16px; height: 16px; }
  .user-list { max-height: 44vh; }
  .u-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .u-actions { justify-content: stretch; }
  .u-btn { flex: 1; text-align: center; padding: 9px 4px; font-size: 13px; min-width: 0; }
  .filters { gap: 8px; padding: 10px; }
  .f-item { width: 100%; }
  .f-item input[type="date"] { flex: 1; min-width: 0; }
  .multi-dd, .multi-dd-btn { width: 100%; }
  .multi-dd-panel { min-width: 0; width: 100%; }
  .seg { flex-wrap: wrap; }
  .table-wrap table { font-size: 12px; }
  .table-wrap th, .table-wrap td { padding: 6px 7px; }
  .dash-meta { font-size: 11px; }
}