/* ===== YUJU HVAC Open Platform - components.css ===== */
/* 可复用组件：徽章/按钮/表单/模态框/卡片网格/图表/标签页 */

/* ===== Badge ===== */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:20px;font-size:12px;font-weight:500;white-space:nowrap;
}
.badge.green{background:rgba(34,197,94,.14);color:var(--green);}
.badge.yellow{background:rgba(245,158,11,.14);color:var(--yellow);}
.badge.red{background:rgba(239,68,68,.14);color:var(--red);}
.badge.blue{background:rgba(59,130,246,.14);color:var(--blue);}
.badge.gray{background:rgba(100,116,139,.18);color:#cbd5e1;}

/* ===== Tab Button ===== */
.tab-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;background:none;border:none;color:var(--muted);
  font-size:14px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;
  transition:.2s;margin-bottom:-1px;
}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--green);border-bottom-color:var(--green);}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  padding:9px 16px;border-radius:9px;font-size:13px;font-weight:500;
  border:1px solid var(--border);background:#1e293b;color:var(--text);cursor:pointer;transition:.2s;
}
.btn:hover{background:#243349;border-color:#4b5563;}
.btn.green{background:var(--green);border-color:var(--green);color:#042418;font-weight:600;}
.btn.green:hover{background:#1db052;}
.btn.red{background:var(--red);border-color:var(--red);color:#fff;}
.btn.red:hover{background:#dc2626;}
.btn.yellow{background:var(--yellow);border-color:var(--yellow);color:#3a2600;}
.btn.ghost{background:transparent;}
.btn.sm{padding:6px 11px;font-size:12px;}
.btn.icon{padding:9px;width:38px;height:38px;}

.ctrl-btn{
  width:46px;height:46px;border-radius:12px;border:1px solid var(--border);
  background:#1e293b;color:var(--text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;
}
.ctrl-btn:hover{background:#243349;border-color:var(--green);color:var(--green);}
.ctrl-btn.power{background:var(--green);color:#042418;border-color:var(--green);}
.ctrl-btn.power:hover{background:#1db052;}
.ctrl-btn.power.off{background:#475569;color:#cbd5e1;border-color:#475569;}

/* ===== Form ===== */
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px;}
.input,.select{
  width:100%;padding:10px 13px;border-radius:9px;
  background:var(--card-2);border:1px solid var(--border);color:var(--text);font-size:14px;outline:none;
}
.input:focus,.select:focus{border-color:var(--green);}
.input::placeholder{color:#64748b;}

/* ===== Modal ===== */
.modal-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-mask.show{display:flex;}
.modal{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  width:100%;max-width:460px;padding:24px;max-height:90vh;overflow:auto;
}
.modal.wide{max-width:680px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.modal-head h3{font-size:17px;}
.modal-close{background:transparent;border:none;color:var(--muted);font-size:20px;cursor:pointer;}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}

/* ===== Device card grid ===== */
.dcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;}
.dcard{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;
  transition:.2s;
}
.dcard:hover{border-color:var(--green);transform:translateY(-2px);}
.dcard .dc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;}
.dcard .dc-id{font-size:17px;font-weight:700;}
.dcard .dc-sub{color:var(--muted);font-size:12px;margin-top:3px;}
.dcard .dc-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;}
.dcard .dc-row:last-child{border-bottom:none;}
.dcard .dc-row .lbl{color:var(--muted);}
.dcard .dc-foot{display:flex;gap:8px;margin-top:14px;}

/* ===== Tabs ===== */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:18px;flex-wrap:wrap;}
.tab{
  padding:10px 16px;font-size:13px;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;transition:.2s;
}
.tab:hover{color:var(--text);}
.tab.active{color:var(--green);border-bottom-color:var(--green);}

/* ===== Chart (bars) ===== */
.chart-bars{height:240px;display:flex;align-items:flex-end;justify-content:space-around;gap:8px;padding:10px 0;}
.bar{flex:1;background:linear-gradient(var(--green),#0ea96b);border-radius:8px 8px 0 0;min-height:6px;position:relative;transition:.3s;}
.bar:hover{filter:brightness(1.2);}
.bar .bar-val{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted);}
.chart-x{display:flex;justify-content:space-around;margin-top:8px;font-size:11px;color:var(--muted);}

/* line chart svg */
.line-chart{width:100%;height:240px;}

/* ===== Floor map ===== */
.map-wrap{position:relative;background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;min-height:520px;}
.map-wrap img{width:100%;height:100%;object-fit:contain;display:block;min-height:520px;}
.map-point{
  position:absolute;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;
  border:3px solid #fff;cursor:pointer;box-shadow:0 0 0 4px rgba(0,0,0,.35);transition:.2s;
}
.map-point:hover{transform:translate(-50%,-50%) scale(1.25);}
.map-point.green{background:var(--green);}
.map-point.yellow{background:var(--yellow);}
.map-point.red{background:var(--red);}
.map-pop{
  position:absolute;background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:14px;width:220px;z-index:20;font-size:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.map-pop h4{margin-bottom:8px;font-size:15px;}
.map-pop .mp-row{display:flex;justify-content:space-between;padding:4px 0;}
.map-pop .mp-row .lbl{color:var(--muted);}

/* ===== Ranking ===== */
.rank-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.rank-row:last-child{border-bottom:none;}
.rank-no{width:26px;height:26px;border-radius:8px;background:#1e293b;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--muted);}
.rank-row:nth-child(1) .rank-no{background:rgba(245,158,11,.18);color:var(--yellow);}
.rank-row:nth-child(2) .rank-no{background:rgba(148,163,184,.18);color:#cbd5e1;}
.rank-row:nth-child(3) .rank-no{background:rgba(180,83,9,.18);color:#d97706;}
.rank-info{flex:1;min-width:0;}
.rank-info .rname{font-size:14px;}
.rank-info .rbar{height:6px;background:#1e293b;border-radius:6px;margin-top:6px;overflow:hidden;}
.rank-info .rbar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#0ea96b);border-radius:6px;}
.rank-val{font-size:14px;font-weight:600;}

/* ===== Stat inline ===== */
.stat-line{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.stat-line:last-child{border-bottom:none;}
.stat-line .sl-lbl{color:var(--muted);font-size:13px;}
.stat-line .sl-val{font-size:15px;font-weight:600;}

/* big number */
.bignum{font-size:34px;font-weight:700;}
.bignum .unit{font-size:15px;color:var(--muted);font-weight:400;margin-left:4px;}

/* progress */
.progress{height:8px;background:#1e293b;border-radius:8px;overflow:hidden;}
.progress i{display:block;height:100%;background:var(--green);}

/* tag list */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;background:#1e293b;font-size:12px;color:#cbd5e1;}

/* page toolbar */
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap;}
.toolbar .search{display:flex;gap:8px;align-items:center;}

/* empty */
.empty{text-align:center;padding:50px 20px;color:var(--muted);}
.empty i{font-size:42px;margin-bottom:12px;display:block;opacity:.5;}