/* 设备能源管理系统 · 管理端样式（浅色专业风） */
:root{
  --ink:#12212f; --ink2:#3d5265; --ink3:#6b8095; --ink4:#93a7b9;
  --line:#e2e9f0; --line2:#eef3f8; --bg:#f4f7fa; --card:#fff;
  --brand:#005BAC; --brand2:#0a7ec9; --brand-soft:#eaf3fb; --brand-deep:#04325c;
  --red:#C8102E; --amber:#E8A33D; --green:#1F9D55; --teal:#0f8b8d; --violet:#6b52d4;
  --sh:0 1px 2px rgba(16,40,66,.05),0 6px 18px rgba(16,40,66,.06);
  --sidebar:224px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.72 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;-webkit-font-smoothing:antialiased}
#app{display:flex;min-height:100vh}
a{color:var(--brand);text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c8d6e2;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#a9bccd}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 侧边栏 ---------- */
.side{width:var(--sidebar);flex:0 0 var(--sidebar);background:#062b4d;color:#c9dcee;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:11px;align-items:center;padding:19px 18px;border-bottom:1px solid rgba(255,255,255,.09)}
.brand .logo{width:37px;height:37px;border-radius:10px;background:linear-gradient(135deg,#0a86d6,#005BAC);
  display:flex;align-items:center;justify-content:center;font-size:19px;flex:0 0 auto}
.brand .bt b{display:block;color:#fff;font-size:14.5px;letter-spacing:.3px}
.brand .bt span{font-size:11.5px;color:#7fa5c9}
#nav{flex:1;overflow-y:auto;padding:12px 9px}
#nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;color:#b8d0e6;
  font-size:13.6px;cursor:pointer;margin-bottom:2px;transition:.15s;position:relative}
#nav a i{font-style:normal;width:17px;text-align:center;font-size:14px;opacity:.9}
#nav a:hover{background:rgba(255,255,255,.08);color:#fff}
#nav a.on{background:linear-gradient(100deg,rgba(10,134,214,.95),rgba(0,91,172,.9));color:#fff;
  box-shadow:0 4px 14px rgba(0,60,120,.4)}
#nav .grp{font-size:11px;color:#6d93b8;letter-spacing:.12em;padding:15px 12px 6px;text-transform:uppercase}
#nav .badge{margin-left:auto;background:var(--red);color:#fff;font-size:11px;min-width:19px;height:19px;
  border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.sidefoot{padding:12px 15px 15px;border-top:1px solid rgba(255,255,255,.09);font-size:11.6px;color:#7fa5c9;line-height:1.7}
.sidefoot .simtip{color:#ffd479;margin-bottom:5px}

/* ---------- 主区 ---------- */
main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{height:60px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  padding:0 22px;gap:14px;position:sticky;top:0;z-index:40;box-shadow:0 1px 3px rgba(16,40,66,.04)}
.crumb{font-size:16px;font-weight:650;letter-spacing:.2px}
.top .tools{margin-left:auto;display:flex;align-items:center;gap:9px}
.pill{font-size:12.5px;color:var(--ink3);background:#f6f9fc;border:1px solid var(--line);padding:5px 11px;border-radius:8px}
.btn{border:1px solid var(--line);background:#fff;color:var(--ink2);padding:7.5px 13px;border-radius:9px;
  font-size:13.2px;cursor:pointer;transition:.15s;font-family:inherit;white-space:nowrap}
.btn:hover{border-color:#b9d7f0;background:var(--brand-soft);color:#06558f}
.btn.primary{background:linear-gradient(120deg,#005BAC,#0a86d6);border-color:transparent;color:#fff;font-weight:600}
.btn.primary:hover{box-shadow:0 6px 16px rgba(10,126,201,.32);color:#fff}
.btn.danger{color:var(--red);border-color:#f6d3da}
.btn.danger:hover{background:#fdecef;border-color:#efbcc7}
.btn.sm{padding:5px 10px;font-size:12.4px;border-radius:7px}
.user{position:relative;display:flex;align-items:center;gap:9px;padding:5px 10px 5px 6px;border:1px solid var(--line);
  border-radius:11px;cursor:pointer;margin-left:4px}
.user:hover{background:#f9fbfd}
.user .av{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#0a86d6,#005BAC);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700}
.user .ut b{display:block;font-size:13px;line-height:1.3}
.user .ut span{font-size:11.4px;color:var(--ink3)}
.udrop{position:absolute;top:110%;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 30px rgba(16,40,66,.16);min-width:132px;padding:5px;display:none}
.user.open .udrop{display:block}
.udrop a{display:block;padding:8px 12px;border-radius:7px;font-size:13.2px;color:var(--ink2)}
.udrop a:hover{background:var(--brand-soft);color:#06558f}
.view{flex:1;padding:20px 22px 40px;min-width:0}

/* ---------- 通用组件 ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:13px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px;box-shadow:var(--sh);position:relative;overflow:hidden}
.kpi .lb{font-size:12.4px;color:var(--ink3);display:flex;align-items:center;gap:6px}
.kpi .vl{font-size:24px;font-weight:700;color:var(--brand);margin:6px 0 2px;letter-spacing:-.5px;line-height:1.25}
.kpi .vl small{font-size:13px;font-weight:500;color:var(--ink3);margin-left:2px}
.kpi .nt{font-size:12.2px;color:var(--ink4)}
.kpi.g .vl{color:var(--green)}.kpi.a .vl{color:var(--amber)}.kpi.r .vl{color:var(--red)}
.kpi.t .vl{color:var(--teal)}.kpi.v .vl{color:var(--violet)}
.kpi:after{content:"";position:absolute;right:-34px;top:-34px;width:88px;height:88px;border-radius:50%;background:rgba(10,126,201,.05)}

.panel{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);margin-bottom:16px}
.panel .ph{display:flex;align-items:center;gap:10px;padding:14px 17px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.panel .ph h3{margin:0;font-size:15px;font-weight:650;display:flex;align-items:center;gap:8px}
.panel .ph h3:before{content:"";width:3.5px;height:15px;border-radius:2px;background:var(--brand2)}
.panel .ph .sp{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.panel .pb{padding:16px 17px}
.panel .pb.p0{padding:0}
.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.grid2b{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:1080px){.grid2,.grid2b{grid-template-columns:1fr}}

.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.3px}
.tbl th{background:#f7fafc;text-align:left;padding:10px 13px;font-weight:650;color:var(--ink2);
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:2}
.tbl td{padding:9px 13px;border-bottom:1px solid var(--line2);color:var(--ink2);vertical-align:middle}
.tbl tr:hover td{background:#fafcfe}
.tbl td.c,.tbl th.c{text-align:center}
.tbl td.r,.tbl th.r{text-align:right}
.tbl .code{font-family:"SFMono-Regular",Consolas,monospace;font-size:12.4px;color:#0b4a7a;font-weight:600}
.scroll{overflow:auto;max-height:calc(100vh - 300px)}
.empty{padding:44px 20px;text-align:center;color:var(--ink4);font-size:13.4px}

.tag{display:inline-flex;align-items:center;gap:4.5px;padding:2px 8px;border-radius:6px;font-size:12.2px;
  border:1px solid transparent;white-space:nowrap;line-height:1.65}
.t-b{background:var(--brand-soft);color:#06558f;border-color:#cfe4f6}
.t-g{background:#e8f7ee;color:#157347;border-color:#c6ebd5}
.t-a{background:#fdf4e3;color:#8a5b0b;border-color:#f5e2bd}
.t-r{background:#fdecef;color:#a80d26;border-color:#f6d3da}
.t-v{background:#f1eefc;color:#4b34a8;border-color:#ded7f7}
.t-t{background:#e7f6f6;color:#0b6f71;border-color:#c9ebeb}
.t-gray{background:#f1f5f9;color:#5a7286;border-color:#e2e9f0}
.dot{width:7.5px;height:7.5px;border-radius:50%;display:inline-block;flex:0 0 auto}
.dot.g{background:var(--green);box-shadow:0 0 0 3px rgba(31,157,85,.14)}
.dot.a{background:var(--amber);box-shadow:0 0 0 3px rgba(232,163,61,.16)}
.dot.r{background:var(--red);box-shadow:0 0 0 3px rgba(200,16,46,.14)}
.dot.gray{background:#b6c8d8}
.dot.pulse{animation:pl 1.6s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(31,157,85,.4)}70%{box-shadow:0 0 0 7px rgba(31,157,85,0)}100%{box-shadow:0 0 0 0 rgba(31,157,85,0)}}

.chart{position:relative;width:100%}
.chart.h230{height:230px}.chart.h260{height:260px}.chart.h300{height:300px}.chart.h180{height:180px}
.bar-wrap{height:9px;background:#eef3f8;border-radius:5px;overflow:hidden;min-width:64px}
.bar-wrap i{display:block;height:100%;border-radius:5px}

.filter{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.filter label{font-size:12.8px;color:var(--ink3)}
input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{
  padding:7.5px 11px;border:1.4px solid #dbe4ee;border-radius:8px;font-size:13.3px;font-family:inherit;
  background:#fbfdff;outline:none;color:var(--ink);transition:.15s;max-width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--brand2);background:#fff;box-shadow:0 0 0 3px rgba(10,126,201,.1)}
select{cursor:pointer}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.9px;color:var(--ink2);margin-bottom:5px;font-weight:600}
.field .hint{font-size:11.8px;color:var(--ink4);margin-top:4px;line-height:1.6}
.field input,.field select,.field textarea{width:100%}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media(max-width:700px){.row2,.row3{grid-template-columns:1fr}}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;background:rgba(6,24,43,.5);backdrop-filter:blur(2px);display:none;
  align-items:flex-start;justify-content:center;z-index:100;padding:44px 18px;overflow-y:auto}
.modal.on{display:flex}
.mbox{background:#fff;border-radius:15px;box-shadow:0 26px 64px rgba(2,20,40,.34);width:100%;max-width:680px;
  animation:mi .18s ease-out}
.mbox.wide{max-width:900px}
@keyframes mi{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mh{display:flex;align-items:center;padding:17px 21px;border-bottom:1px solid var(--line2)}
.mh h3{margin:0;font-size:16px;font-weight:650}
.mh .x{margin-left:auto;cursor:pointer;color:var(--ink4);font-size:20px;line-height:1;padding:0 4px}
.mh .x:hover{color:var(--red)}
.mb{padding:19px 21px;max-height:calc(100vh - 210px);overflow-y:auto}
.mf{display:flex;gap:10px;justify-content:flex-end;padding:15px 21px;border-top:1px solid var(--line2);background:#fbfdff;border-radius:0 0 15px 15px}
.sec-t{font-size:13.2px;font-weight:650;color:var(--brand);margin:20px 0 11px;padding-bottom:7px;
  border-bottom:1px dashed var(--line);display:flex;align-items:center;gap:7px}
.sec-t:first-child{margin-top:0}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,22px);background:#12212f;color:#fff;
  padding:11px 20px;border-radius:10px;font-size:13.6px;opacity:0;transition:.24s;z-index:300;pointer-events:none;
  box-shadow:0 12px 30px rgba(0,0,0,.28);max-width:82vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:#a80d26}
.toast.ok{background:#157347}

.loading{padding:60px;text-align:center;color:var(--ink3);font-size:13.6px}
.tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs a{padding:9px 15px;font-size:13.6px;color:var(--ink3);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:650}
.tabs a:hover{color:var(--brand2)}
.notice{padding:11px 14px;border-radius:9px;font-size:13px;margin-bottom:14px;line-height:1.75}
.notice.info{background:#f7fbfe;border-left:3.5px solid var(--brand2);color:var(--ink2)}
.notice.warn{background:#fffaf1;border-left:3.5px solid var(--amber);color:#7a5a12}
.notice.ok{background:#f5fcf7;border-left:3.5px solid var(--green);color:#157347}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mono{font-family:"SFMono-Regular",Consolas,monospace;font-size:12.3px}
.legend{display:flex;gap:15px;flex-wrap:wrap;font-size:12.6px;color:var(--ink3);margin-top:9px}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:block}