/* ==========================================================================
   pages.css - 各模块页面级专用样式
   ========================================================================== */

/* --- 大屏全屏自适应：禁止横向/纵向滚动条 --- */
.page{
  overflow:hidden !important;
  padding-right:0 !important;
}
.page > .row{ min-height:0; }
.row > *{ min-height:0; }
/* 视频墙行高自适应（不按 16:9 撑高） */
.vwall{ grid-auto-rows:1fr; height:100%; }
.vwall .vtile{ aspect-ratio:auto; }
/* 卡片内部可收缩区域 */
.card{ min-height:0; }
.card-bd{ min-height:0; }

/* --- 通用空状态 --- */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 20px;color:var(--text-3);font-size:13px;gap:14px;
}
.empty .ico{font-size:48px;opacity:.3}

/* --- 各页面标题附加修饰 --- */
.page-title h2 .badge{
  display:inline-flex;align-items:center;
  margin-left:8px;padding:2px 8px;font-size:11px;font-weight:400;
  border-radius:10px;background:rgba(0,229,255,.12);color:var(--c-primary);
  border:1px solid var(--line);
}

/* --- 行/列对齐小工具 --- */
.flex-center{display:flex;align-items:center;justify-content:center}
.gap-4{gap:4px}
.gap-8{gap:8px}
.gap-14{gap:14px}

/* --- 列表美化 --- */
.list-row{
  display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;
  padding:10px 12px;border-bottom:1px solid rgba(0,229,255,.06);
  transition:.15s;cursor:pointer;
}
.list-row:hover{background:rgba(0,229,255,.05)}
.list-row .ic{
  width:36px;height:36px;border-radius:8px;
  background:linear-gradient(180deg,rgba(0,229,255,.1),rgba(0,229,255,.04));
  border:1px solid var(--line);display:grid;place-items:center;
  font-size:16px;color:var(--c-primary);
}
.list-row .name{font-size:13px;color:var(--text-1)}
.list-row .meta{font-size:11px;color:var(--text-3);margin-top:2px}
.list-row .right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}

/* --- 温度计 --- */
.thermo{
  position:relative;width:30px;height:120px;
  background:rgba(0,30,80,.6);border:1px solid var(--line);border-radius:15px;overflow:hidden;
}
.thermo-fill{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(0deg,#ff3d57,#ffb300,#00e676);
}
.thermo::before{
  content:"";position:absolute;left:50%;top:-8px;width:14px;height:14px;border-radius:50%;
  background:#00e676;transform:translateX(-50%);
  box-shadow:0 0 8px #00e676;
}

/* --- 圆形小型 KPI --- */
.ring-stat{
  position:relative;width:80px;height:80px;
}
.ring-stat canvas{width:100%;height:100%}
.ring-stat .v{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-dig);font-size:18px;color:var(--c-primary);font-weight:700;
}

/* --- LED 屏模拟效果 --- */
.led-screen{
  background:#000;
  border:6px solid #1c5fa3;
  border-radius:6px;
  position:relative;
  display:grid;place-items:center;
  overflow:hidden;
  box-shadow:0 0 40px rgba(0,229,255,.3),inset 0 0 20px rgba(0,229,255,.1);
}
.led-screen::before{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(0,229,255,.15), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(124,77,255,.15), transparent 50%);
}
.led-screen::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0,rgba(0,0,0,.15) 2px,transparent 2px,transparent 4px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.15) 0,rgba(0,0,0,.15) 2px,transparent 2px,transparent 4px);
  pointer-events:none;
}

/* --- 楼宇卡片（3D 模拟） --- */
.bldg-iso{
  position:relative;width:100%;height:200px;
  background:radial-gradient(ellipse at center bottom,#0a4d8c 0%,#040b1a 70%);
  border-radius:8px;overflow:hidden;
}
.bldg-iso::before{
  content:"";position:absolute;left:50%;top:60%;width:60%;height:60%;
  background:radial-gradient(ellipse,rgba(0,229,255,.4),transparent 60%);
  transform:translate(-50%,-50%);
  animation:flicker 4s ease-in-out infinite;
}

/* --- 房间布局图（电梯页） --- */
.floor-plan{
  position:relative;height:200px;
  background:linear-gradient(135deg,#082045,#040b1a);
  border:1px solid var(--line);border-radius:6px;overflow:hidden;
}
.floor-plan::before{
  content:"";position:absolute;inset:8px;
  border:1px dashed rgba(0,229,255,.2);border-radius:4px;
}

/* --- 任务/工单条目强化 --- */
.task{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px;border-radius:4px;background:rgba(0,30,80,.4);
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.task::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--c-primary),transparent);
}
.task.urgent::before{background:linear-gradient(180deg,var(--c-red),var(--c-amber))}
.task .chk{
  width:18px;height:18px;border:1px solid var(--line);border-radius:3px;flex-shrink:0;
  display:grid;place-items:center;cursor:pointer;color:transparent;
  transition:.2s;margin-top:2px;
}
.task .chk.done{
  background:var(--c-primary);border-color:var(--c-primary);color:#fff;
}
.task.done{opacity:.6}
.task.done .name{text-decoration:line-through}

/* --- 数据小卡（小数字 + 标题） --- */
.mini{
  display:flex;flex-direction:column;align-items:center;
  padding:8px;background:rgba(0,229,255,.04);border:1px solid var(--line);
  border-radius:6px;text-align:center;
}
.mini .v{font-family:var(--font-dig);font-size:18px;color:var(--c-primary);font-weight:600}
.mini .l{font-size:11px;color:var(--text-3);margin-top:2px}

/* --- 标签计数胶囊 --- */
.count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:18px;padding:0 6px;font-size:10px;font-weight:600;
  background:var(--c-red);color:#fff;border-radius:9px;
}
.count.green{background:var(--c-green)}
.count.amber{background:var(--c-amber);color:#000}
.count.purple{background:var(--c-purple)}

/* --- 装饰底纹（高级感） --- */
.tech-bg{
  background-image:
    linear-gradient(rgba(0,229,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.03) 1px,transparent 1px),
    radial-gradient(circle at center, rgba(0,229,255,.06), transparent 60%);
  background-size:24px 24px,24px 24px,100% 100%;
}

/* --- 数字滚动提示 --- */
.counter{
  display:inline-flex;align-items:baseline;gap:2px;
}
.counter .roll{
  display:inline-block;
  width:1ch;text-align:center;
  background:linear-gradient(180deg,rgba(0,229,255,.15),rgba(0,229,255,.05));
  border:1px solid var(--line);
  border-radius:2px;
  font-family:var(--font-dig);font-size:20px;color:var(--c-primary);
  font-weight:700;
}

/* --- 加载/Empty 状态 --- */
.skeleton{
  background:linear-gradient(90deg,rgba(0,30,80,.4),rgba(0,229,255,.1),rgba(0,30,80,.4));
  background-size:200% 100%;
  animation:skel 1.5s ease-in-out infinite;
  border-radius:4px;height:16px;
}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* --- 状态颜色快速映射 --- */
.t-cyan{color:var(--c-primary)}
.t-yellow{color:var(--c-amber)}
.t-red{color:var(--c-red)}
.t-green{color:var(--c-green)}
.t-purple{color:var(--c-purple)}
.t-orange{color:var(--c-orange)}

.bg-cyan{background:var(--c-primary)}
.bg-cyan-soft{background:rgba(0,229,255,.12)}

/* --- 卡片内间距微调 --- */
.p-8{padding:8px}
.p-12{padding:12px}
.p-16{padding:16px}
.mt-8{margin-top:8px}
.mt-14{margin-top:14px}

/* --- 列表自适应滚动 --- */
.scroll-y{
  overflow-y:auto;overflow-x:hidden;
}
.scroll-y::-webkit-scrollbar{width:6px}
.scroll-y::-webkit-scrollbar-thumb{background:var(--c-primary);opacity:.3}