/* ===== YUJU HVAC Open Platform - main.css ===== */
/* 工业 BMS 深色主题 - 全局布局/侧边栏/顶栏/卡片/表格 */

:root{
  --bg:#0B1220;
  --sidebar:#111827;
  --card:#1F2937;
  --card-2:#172033;
  --border:#374151;
  --green:#22C55E;
  --yellow:#F59E0B;
  --red:#EF4444;
  --text:#FFFFFF;
  --muted:#94A3B8;
  --blue:#3B82F6;
  --sidebar-w:248px;
  --topbar-h:68px;
  --radius:14px;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:"Segoe UI","Microsoft YaHei",sans-serif;}

html,body{height:100%;}

body{
  background:var(--bg);
  color:var(--text);
  display:flex;
  height:100vh;
  overflow:hidden;
}

a{color:inherit;text-decoration:none;}

/* ===== Layout ===== */
.sidebar{
  width:var(--sidebar-w);
  background:var(--sidebar);
  border-right:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  z-index:50;
}

.main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* ===== Logo ===== */
.logo{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 22px;
  font-size:19px;
  font-weight:700;
  color:var(--green);
  border-bottom:1px solid rgba(255,255,255,.05);
  white-space:nowrap;
}
.logo i{font-size:22px;}

/* ===== Menu ===== */
.menu{
  flex:1;
  overflow-y:auto;
  padding:14px 0 30px;
}
.menu::-webkit-scrollbar{width:6px;}
.menu::-webkit-scrollbar-thumb{background:#334155;border-radius:6px;}

.menu-item{position:relative;}
.menu-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 22px;
  color:#cbd5e1;
  font-size:14px;
  cursor:pointer;
  transition:background .2s,color .2s;
  border-left:3px solid transparent;
  white-space:nowrap;
}
.menu-link i{width:20px;text-align:center;font-size:16px;}
.menu-link:hover{background:#1e293b;color:var(--green);}
.menu-link.active{
  background:rgba(34,197,94,.12);
  color:var(--green);
  border-left-color:var(--green);
}
.menu-arrow{margin-left:auto;font-size:11px;transition:transform .2s;color:var(--muted);}
.menu-item.open .menu-arrow{transform:rotate(90deg);}

.submenu{display:none;padding-bottom:6px;}
.menu-item.open .submenu{display:block;}
.submenu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 22px 10px 50px;
  color:var(--muted);
  font-size:13px;
  transition:.2s;
}
.submenu a:hover{color:var(--green);background:#1e293b;}
.submenu a.active{color:var(--green);}
.submenu a .dot{width:6px;height:6px;border-radius:50%;background:#475569;}
.submenu a.active .dot{background:var(--green);}

/* ===== Topbar ===== */
.topbar{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  background:var(--sidebar);
  border-bottom:1px solid rgba(255,255,255,.05);
  flex-shrink:0;
}
.topbar .title h1{font-size:20px;font-weight:600;}
.topbar .title p{margin-top:2px;color:var(--muted);font-size:12px;}

.topbar-right{display:flex;align-items:center;gap:18px;}
.lang-switch{
  display:flex;align-items:center;gap:6px;
  background:#1e293b;border:1px solid var(--border);
  border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer;color:var(--muted);
}
.lang-switch:hover{color:var(--text);}
.icon-btn{
  width:38px;height:38px;border-radius:10px;
  background:#1e293b;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);cursor:pointer;position:relative;
}
.icon-btn:hover{color:var(--text);}
.icon-btn .badge-dot{
  position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid var(--sidebar);
}
.user-chip{display:flex;align-items:center;gap:10px;}
.avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--green),#0ea96b);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#042418;
}
.user-chip .uname{font-size:13px;}
.user-chip .urole{font-size:11px;color:var(--muted);}

/* ===== Content ===== */
.content{flex:1;overflow:auto;padding:24px 28px;}
.content::-webkit-scrollbar{width:8px;}
.content::-webkit-scrollbar-thumb{background:#334155;border-radius:8px;}

/* ===== Cards grid ===== */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.kcard{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  position:relative;
  overflow:hidden;
}
.kcard .kicon{
  position:absolute;right:16px;top:16px;
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.kcard h4{color:var(--muted);font-size:13px;font-weight:500;}
.kcard .kval{font-size:30px;font-weight:700;margin-top:10px;}
.kcard .ksub{margin-top:6px;font-size:12px;display:flex;align-items:center;gap:5px;}
.kcard .ksub.up{color:var(--green);}
.kcard .ksub.down{color:var(--red);}
.kcard .ksub.neutral{color:var(--muted);}

/* ===== Panel ===== */
.section{margin-top:22px;display:grid;gap:18px;}
.section.c2{grid-template-columns:2fr 1fr;}
.section.c3{grid-template-columns:repeat(3,1fr);}
.section.c2-1{grid-template-columns:1fr 1fr;}
.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
}
.panel h3{font-size:15px;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.panel h3 i{color:var(--green);}
.panel .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.panel .panel-head h3{margin-bottom:0;}

/* ===== Table ===== */
table{width:100%;border-collapse:collapse;}
th{
  text-align:left;padding:12px 14px;
  color:var(--muted);font-size:12px;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-transform:uppercase;letter-spacing:.4px;
}
td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px;}
tbody tr:hover{background:rgba(255,255,255,.02);}
tbody tr:last-child td{border-bottom:none;}

/* ===== Status dot ===== */
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle;}
.sdot.green{background:var(--green);box-shadow:0 0 6px var(--green);}
.sdot.yellow{background:var(--yellow);box-shadow:0 0 6px var(--yellow);}
.sdot.red{background:var(--red);box-shadow:0 0 6px var(--red);}
.sdot.gray{background:#64748b;}

/* ===== Responsive ===== */
.menu-toggle{display:none;}

@media(max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr);}
  .section.c2,.section.c3,.section.c2-1{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .sidebar{
    position:fixed;left:0;top:0;height:100%;
    transform:translateX(-100%);transition:transform .3s;
  }
  .sidebar.show{transform:translateX(0);}
  .menu-toggle{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:10px;background:#1e293b;border:1px solid var(--border);color:var(--text);cursor:pointer;
  }
  .topbar{padding:0 14px;}
  .content{padding:16px;}
  .topbar .title h1{font-size:17px;}
  .user-chip .uname,.user-chip .urole{display:none;}
}