/* dashboard.css —— 1:1 移植 src/views/home.vue 的 <style scoped> 规则 + 原项目全局重置 */

/* 全局重置（来自原 index.html 与 App.vue） */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: #0b1c2d;
  color: #fff;
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}
ul, li { list-style: none; }

.homeMain { width: 100vw; height: 100vh; overflow: hidden; position: relative; }
.contain { width: 100%; height: 100%; position: absolute; background: url('/static/bgImage.jpg') no-repeat center center; background-size: cover; }
/* 顶部横幅：固定悬浮，宽度等同页面宽度 */
.header { position: fixed; left: 0; top: 0; width: 100vw; z-index: 1000; pointer-events: none; }
.header img { width: 100vw; height: auto; display: block; }
.theBody { height: 100%; padding: 16px 16px 20px 16px; padding-top: var(--header-h, 30px); display: grid; grid-template-rows: 1fr 0.85fr; gap: 16px; }

/* 上半区域三列布局 */
/* 上区与下区采用 0.8:1 的行高比例，为底部四个模块留出更多高度 */
.topArea { display: flex; gap: 16px; min-height: 0; }
.col { display: flex; flex-direction: column; gap: 16px; }
.leftColumn, .rightColumn { flex: 1 1 25%; min-width: 280px; }
.middleColumn { flex: 1 1 50%; min-width: 480px; }
/* 让左右两列上下两个面板等高分布 */
.leftColumn .panel, .rightColumn .panel { flex: 1; min-height: 0; }

/* 面板与通用样式 */
.panel { background: rgba(32,149,170,0.2); padding: 16px; color: rgba(255,255,255,0.85); display: flex; flex-direction: column; min-height: 180px; }
.title { width: 100%; display: flex; margin-bottom: 12px; }
.title .icon { width: 20px; height: 20px; margin-right: 8px; border-radius: 2px; object-fit: contain; display: block; background: none; }
.title .text { line-height: 20px; font-size: 18px; }
.ech-holder { flex: 1; min-height: 200px; display: flex; align-items: center; justify-content: center; }
/* 报警信息：左图右列布局 */
.alarm-wrap { display: flex; align-items: center; gap: 16px; height: 100%; }
.alarm-chart { flex: 0 0 48%; height: 100%; }
.alarm-list { flex: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 28px; gap: 8px 16px; align-content: start; overflow: hidden; }
.alarm-list li { display: flex; align-items: center; gap: 6px; height: 28px; color: rgba(255,255,255,0.85); }
.alarm-list .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.alarm-list .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alarm-list .value { color: rgba(255,255,255,0.65); }

/* 指定四个模块（园区名企、科创服务、智慧党建、报警信息）高度缩放至约 80% */
.panel.compact { padding-top: 8px; padding-bottom: 8px; }
.panel.compact .ech-holder { min-height: 140px; }
.panel.compact .bj-box > .lb { margin-top: 4px; }
.panel.compact .box-title { height: 34px; }
.panel.compact .box-title div { line-height: 34px; font-size: 15px; }
.panel.compact .item div { height: 34px; line-height: 34px; font-size: 15px; }

/* 列表盒子 */
.bj-box { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bj-box > .lb { flex: 1; overflow: hidden; border: none; font-size: 14px; margin-top: 8px; position: relative; }
.bj-box .box-title { display: flex; background: rgba(255,255,255,0.1); height: 42px; }
.box-title div { line-height: 42px; opacity: .85; font-size: 16px; }
.bj-box .item { will-change: transform; }
.bj-box .item li { display: flex; }
.bj-box .item li:nth-child(even) { background: rgba(52,221,252,0.1); }
.bj-box .item div { height: 42px; line-height: 42px; font-size: 16px; color: rgba(255,255,255,0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 顶部中间三块数字 */
.midTop { width: 100%; display: flex; gap: 16px; }
.top1 { flex: 1; background: rgba(32,149,170,0.4); border: 1px solid #00ffd3; }
.topText { width: 100%; color: #fff; text-align: center; padding: 12px 0; }
.topText > .sp1 { font-size: 36px; margin-bottom: 10px; }
.topText > .sp2 { font-size: 18px; }

/* 底部四图一行 */
.bottomRow { display: flex; gap: 16px; align-items: stretch; }
.bottomRow > .panel { flex: 1; min-width: 240px; max-height: 320px; }