/* 物联网管理平台 · 设计变量与公共样式（视觉向现代中后台对齐） */
:root {
  --iot-primary: #1677ff;
  --iot-primary-hover: #4096ff;
  --iot-bg: #f0f2f5;
  --iot-sidebar: #001529;
  --iot-sidebar-active: #1677ff;
  --iot-text: #1f2329;
  --iot-text-2: #646a73;
  --iot-border: #e5e7eb;
  --iot-radius: 8px;
  --iot-shadow: 0 1px 3px rgba(0, 21, 41, .06), 0 1px 2px rgba(0, 21, 41, .04);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--iot-bg); color: var(--iot-text);
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }

/* ===== 布局骨架（antd 浅色主题；特异性需压过 layui 默认深色） ===== */
.iot-shell { height: 100vh; }
.layui-layout-admin .iot-header {
  background: #fff !important; border-bottom: 1px solid var(--iot-border);
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08); z-index: 1000; }
.iot-logo { float: left; width: 220px; height: 60px; line-height: 60px; padding-left: 20px;
  color: var(--iot-primary); font-size: 17px; font-weight: 600; white-space: nowrap; }
.iot-logo .layui-icon { font-size: 20px; margin-right: 6px; }
.layui-layout-admin .iot-usernav { background: transparent !important; }
.layui-layout-admin .iot-usernav .layui-nav-item > a,
.layui-layout-admin .iot-usernav .layui-nav-child a { color: var(--iot-text) !important; }
.layui-layout-admin .iot-usernav .layui-nav-child a:hover { background: #f0f7ff !important; }
.iot-usernav .layui-nav-more { border-top-color: var(--iot-text) !important; }
.iot-usernav .layui-nav-mored { border-bottom-color: transparent !important; }

.layui-layout-admin .iot-side { background: #fff !important; border-right: 1px solid var(--iot-border); }
.iot-side .layui-side-scroll { width: 240px; }
.iot-menu { list-style: none; margin: 12px 0 0; padding: 0 10px; }
.iot-menu li a { display: block; padding: 12px 16px; margin: 2px 0; color: #4b5563;
  border-radius: 6px; text-decoration: none; font-size: 14px; transition: background .15s, color .15s; }
.iot-menu li a:hover { color: var(--iot-primary); background: #f5f7fa; }
.iot-menu li.iot-active a { color: var(--iot-primary); background: #e6f4ff; font-weight: 500; }
.iot-menu .layui-icon { margin-right: 8px; font-size: 16px; }

.iot-body { left: 220px; background: var(--iot-bg); overflow-y: auto; }
.iot-page { padding: 20px 24px 40px; }
.iot-page-head { margin-bottom: 16px; }
.iot-page-title { font-size: 20px; font-weight: 600; }

/* ===== 卡片 ===== */
.iot-card { background: #fff; border-radius: var(--iot-radius); box-shadow: var(--iot-shadow); padding: 18px 20px; margin-bottom: 16px; }
.iot-card-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; }

/* 统计卡 */
.iot-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.iot-stat { background: #fff; border-radius: var(--iot-radius); box-shadow: var(--iot-shadow); padding: 20px; display: flex; align-items: center; }
.iot-stat-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 14px; font-size: 24px; color: #fff; flex: none; }
.iot-stat-num { font-size: 26px; font-weight: 700; line-height: 1.2; }
.iot-stat-label { font-size: 13px; color: var(--iot-text-2); margin-top: 2px; }
.iot-stat.c-blue .iot-stat-icon { background: #1677ff; }
.iot-stat.c-green .iot-stat-icon { background: #52c41a; }
.iot-stat.c-cyan .iot-stat-icon { background: #13c2c2; }
.iot-stat.c-red .iot-stat-icon { background: #ff4d4f; }

/* 图表区 */
.iot-charts { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; margin-bottom: 16px; }
.iot-chart { height: 300px; }

/* ===== 表格微调 ===== */
.iot-table-wrap { background: #fff; border-radius: var(--iot-radius); box-shadow: var(--iot-shadow); padding: 6px 16px 16px; }
.layui-table thead tr { background: #fafafa; }
.layui-table thead th { font-weight: 600; color: var(--iot-text); }
.layui-table tbody tr:hover > td { background: #f0f7ff; }
.iot-toolbar { padding: 12px 0; }
.layui-btn.iot-btn-primary { background: var(--iot-primary); }
.layui-btn-primary:hover { border-color: var(--iot-primary); color: var(--iot-primary); }

/* 状态徽章 */
.iot-badge { display: inline-block; padding: 1px 10px; border-radius: 10px; font-size: 12px; line-height: 20px; }
.iot-badge.online { color: #52c41a; background: #f6ffed; border: 1px solid #b7eb8f; }
.iot-badge.offline { color: #8c8c8c; background: #fafafa; border: 1px solid #d9d9d9; }
.iot-badge.ok { color: #52c41a; background: #f6ffed; border: 1px solid #b7eb8f; }
.iot-badge.fail, .iot-badge.timeout { color: #ff4d4f; background: #fff2f0; border: 1px solid #ffccc7; }
.iot-badge.pending { color: #faad14; background: #fffbe6; border: 1px solid #ffe58f; }
.iot-tag { display: inline-block; padding: 0 8px; margin-right: 4px; border-radius: 4px; font-size: 12px; line-height: 20px;
  color: var(--iot-primary); background: #e6f4ff; border: 1px solid #91caff; }

/* ===== 登录页 ===== */
.iot-login-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1677ff 0%, #001529 100%); }
.iot-login-card { width: 380px; background: #fff; border-radius: 12px; padding: 40px 36px 32px;
  box-shadow: 0 12px 40px rgba(0, 21, 41, .35); }
.iot-login-card h1 { margin: 0 0 6px; font-size: 22px; color: var(--iot-text); text-align: center; }
.iot-login-card .iot-login-sub { margin-bottom: 28px; text-align: center; color: var(--iot-text-2); font-size: 13px; }
.iot-login-card .layui-input { height: 44px; border-radius: 6px; }
.iot-login-card .layui-btn { height: 44px; border-radius: 6px; background: var(--iot-primary); font-size: 15px; }

/* ===== 弹窗表单（左右对称留白，宽度自适应弹窗） ===== */
.iot-form { padding: 20px 24px 8px; width: auto; }
.iot-form .layui-form-item { margin-bottom: 16px; }
.iot-form label { display: block; font-size: 13px; color: var(--iot-text-2); margin-bottom: 6px; line-height: 1.5; }
.iot-form .layui-input, .iot-form .layui-select, .iot-form .layui-textarea { border-radius: 6px; }
.iot-form .layui-form-select .layui-input { padding-right: 30px; }
.iot-form-tip { font-size: 12px; color: #999; margin-top: 4px; }

/* 响应式 */
@media (max-width: 1100px) {
  .iot-stats { grid-template-columns: repeat(2, 1fr); }
  .iot-charts { grid-template-columns: 1fr; }
}