/* ============================================================
 * 焊接设备监控平台 v2 - 全局样式
 * 设计变量与组件类名对齐 ui-demo/ui-demo.html（1:1 UI 验收基准）
 * ============================================================ */
[hidden] { display: none !important; }

/* ================= 设计变量（与 ui-demo 一致） ================= */
:root{
  --bg:#f3f5f9;            /* 页面底色 */
  --bg2:#ffffff;           /* 卡片表面 */
  --ink:#1a2432;           /* 主文字 */
  --muted:#6b7a90;         /* 次要文字 */
  --rule:#e3e8f0;          /* 边框 */
  --accent:#ea580c;        /* 焊接橙（强调） */
  --accent2:#2563eb;       /* 蓝（次强调/图表） */
  --side:#1e3a8a;          /* 侧边栏深蓝 */
  --side-ink:#c9d6f5;      /* 侧边栏文字（蓝调浅色） */
  --ok:#16a34a;            /* 在线/成功 */
  --warn:#d97706;          /* 警告 */
  --bad:#dc2626;           /* 离线/失败 */
  --radius:10px;
  --shadow:0 1px 3px rgba(20,28,40,.08);
  font-size:15px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}

/* ================= 整体布局（深蓝侧边栏） ================= */
.app{display:flex;min-height:100vh}
.sidebar{width:216px;background:var(--side);color:var(--side-ink);position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;z-index:10}
.logo{padding:20px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.logo .t{font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:.02em}
.logo .s{font-size:.72rem;color:#8ea3d4;margin-top:2px}
.nav{flex:0 0 auto;padding:12px 10px}
.nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;color:var(--side-ink);text-decoration:none;font-size:.92rem;margin-bottom:4px;cursor:pointer;transition:background .15s}
.nav a .ic{width:18px;text-align:center;font-size:1rem}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav a.active{background:var(--accent);color:#fff;font-weight:600}
.user-box{margin-top:auto;padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:.8rem;color:#c6d2df}
.user-box .u-name{font-weight:700;color:#fff;font-size:.9rem}
.user-box .u-role{font-size:.72rem;color:#8fa3b8;margin:2px 0 10px}
.user-box .btn{width:100%;margin-bottom:8px}
.side-foot{padding:14px 18px;font-size:.72rem;color:#7286b8;border-top:1px solid rgba(255,255,255,.08)}
.main{flex:1;margin-left:216px;padding:22px 26px;max-width:1400px}

/* 角色控制：操作员隐藏全部 admin 菜单与页面（沿用 ui-demo 方式） */
body.role-operator .admin-only{display:none!important}

/* ================= 通用组件 ================= */
.page{display:none}
.page.active{display:block;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
h1.pg{font-size:1.25rem;font-weight:700;margin-bottom:4px}
p.pgdesc{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.card{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px}
.card h3{font-size:.95rem;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h3 .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;padding:9px 18px;font-size:.88rem;font-weight:600;cursor:pointer;transition:filter .15s}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:var(--bg2);color:var(--ink);border:1px solid var(--rule)}
.btn.small{padding:5px 12px;font-size:.8rem}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.55;cursor:not-allowed}
label.f{display:block;font-size:.8rem;color:var(--muted);margin-bottom:5px;font-weight:600}
input.f,select.f{width:100%;padding:9px 12px;border:1px solid var(--rule);border-radius:8px;font-size:.88rem;color:var(--ink);background:var(--bg2);outline:none}
input.f:focus,select.f:focus{border-color:var(--accent2)}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:14px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;font-size:.74rem;font-weight:600}
.badge.ok{background:rgba(22,163,74,.1);color:var(--ok)}
.badge.off{background:rgba(100,116,139,.12);color:var(--muted)}
.badge.warn{background:rgba(217,119,6,.12);color:var(--warn)}
.badge.run{background:rgba(37,99,235,.1);color:var(--accent2)}
.badge.acc{background:rgba(234,88,12,.1);color:var(--accent)}
.mono{font-family:Consolas,"Courier New",monospace;font-size:.84em}
.table-wrap{overflow-x:auto;overflow-y:auto;max-height:600px;border:1px solid var(--rule);border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:760px}
th{background:#f8fafc;color:var(--muted);font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);white-space:nowrap;position:sticky;top:0}
td{padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafbfd}
.note{font-size:.78rem;color:var(--muted);margin-top:10px}
.empty-tip{grid-column:1/-1;text-align:center;padding:48px 0;color:var(--muted)}

/* ================= 登录页（沿用现有深蓝渐变风格） ================= */
.login-wrap{height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#16295f 0%,#1e3a8a 55%,#24449c 100%)}
.login-card{width:360px;background:var(--bg2);border-radius:12px;padding:40px 36px 32px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.login-title{font-size:1.25rem;font-weight:700;text-align:center;color:var(--side)}
.login-sub{font-size:.72rem;color:var(--muted);text-align:center;margin:6px 0 20px;letter-spacing:2px}
.login-card label.f{margin-top:12px}
.login-card input.f{margin-top:4px}

/* ================= 页1 设备监控 ================= */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.stat{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.stat .v{font-size:1.45rem;font-weight:700;line-height:1.2}
.stat .v small{font-size:.75rem;color:var(--muted);font-weight:400}
.stat .k{font-size:.76rem;color:var(--muted);margin-top:2px}
.stat .v.ok{color:var(--ok)}.stat .v.bad{color:var(--bad)}.stat .v.acc{color:var(--accent2)}
.dev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.dev-card{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.dev-card.off{opacity:.62}
.dev-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.dev-id{font-weight:700;font-size:1.02rem;color:var(--c-ink,var(--ink))}
.dev-id.link{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.dev-id.link:hover{opacity:.8}
.dev-live{display:flex;gap:22px;margin:10px 0;justify-content:center}
.dev-live .cell{text-align:center}
.dev-live .cell .n{font-size:1.5rem;font-weight:700;line-height:1.1;color:var(--c-cur,var(--c-ink,var(--ink)))}
.dev-live .cell .n small{font-size:.72rem;color:var(--c-muted,var(--muted));font-weight:400}
.dev-live .cell .l{font-size:.72rem;color:var(--c-muted,var(--muted))}
/* 焊工单元格黑色显示 */
.dev-live .cell .n.welder-cell{color:var(--c-welder,#1f2937);font-size:1.02rem;line-height:2.1}
.dev-meta{font-size:.78rem;color:var(--c-muted,var(--muted));border-top:1px dashed var(--rule);padding-top:8px;display:grid;gap:3px}
.dev-meta b{color:var(--c-ink,var(--ink));font-weight:600}
/* 整卡文字配色：蓝色系 + 焊工黑色（与 ui-demo 一致） */
.dev-card{--c-ink:#2563eb;--c-muted:#7e96bd;--c-welder:#1f2937}

/* 实时曲线卡片：插入设备网格内独占整行，显示在点击设备行的正下方 */
#rt-chart-card{grid-column:1 / -1}
#chart-rt{width:100%;height:260px}

/* ================= 图例说明条 ================= */
.legend-tips{display:flex;flex-wrap:wrap;gap:16px;font-size:.78rem;color:var(--muted);margin-top:8px}
.legend-tips span{display:inline-flex;align-items:center;gap:6px}
.lg-line{width:22px;height:0;border-top:2px solid var(--accent2);display:inline-block}
.lg-dash{width:22px;height:0;border-top:2px dashed var(--warn);display:inline-block}
.lg-area{width:14px;height:12px;background:rgba(37,99,235,.14);border-radius:2px;display:inline-block}

/* ================= 波形视图 ================= */
#chart-wave{width:100%;height:440px}
.job-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.js-cell{background:#f8fafc;border:1px solid var(--rule);border-radius:8px;padding:10px 12px}
.js-cell .k{font-size:.72rem;color:var(--muted)}
.js-cell .v{font-size:.9rem;font-weight:600;margin-top:2px;word-break:break-all}

/* ================= 历史记录：作业 id 链接与就地详情行 ================= */
.rec-id{color:var(--accent2);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rec-id:hover{opacity:.8}
.job-detail-row > td{background:#f8fafc;padding:14px 18px}
.tech-tag{display:inline-block;background:rgba(37,99,235,.1);color:var(--accent2);font-weight:700;font-size:.8rem;padding:3px 10px;border-radius:6px;margin:10px 0 8px}
.step-note{display:inline-block;background:rgba(234,88,12,.08);color:var(--accent);font-size:.74rem;padding:2px 8px;border-radius:4px;margin-bottom:8px}

/* ================= 对话框（修改密码） ================= */
/* 全局 *{margin:0} 重置会覆盖浏览器对 modal <dialog> 的默认 margin:auto 居中，
   必须显式恢复，否则弹窗贴左上角显示 */
dialog{border:none;border-radius:12px;padding:0;box-shadow:0 12px 40px rgba(0,0,0,.28);width:380px;margin:auto}
dialog::backdrop{background:rgba(15,23,42,.45)}
.dlg-body{padding:22px}
.dlg-body h3{margin:0 0 14px;font-size:1rem;color:var(--ink)}
.dlg-body label.f{display:block;margin:10px 0 4px}
.dlg-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* ================= 窄屏适配 ================= */
@media (max-width:900px){
  .sidebar{width:64px}
  .sidebar .logo .t,.sidebar .logo .s,.nav a .txt,.side-foot,.user-box{display:none}
  .nav a{justify-content:center}
  .main{margin-left:64px;padding:16px}
}