/* ============ 监控云平台 控制台样式 ============ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: #f4f6fb; color: #1f2533; font-size: 14px;
}
a { color: #1f6feb; text-decoration: none; }
button { font-family: inherit; }

/* 布局 */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 210px; background: #0f1f3d; color: #c8d3e8; flex-shrink: 0;
  display: flex; flex-direction: column;
}
.sidebar .logo { padding: 18px 20px; font-size: 17px; font-weight: 700; color: #fff; border-bottom: 1px solid #1c2d4d; }
.sidebar .logo small { display:block; font-size:11px; font-weight:400; color:#7e8db0; margin-top:3px; }
.sidebar nav { padding: 10px 0; flex: 1; }
.sidebar nav a {
  display: block; padding: 11px 20px; color: #aeb9d4; font-size: 14px; border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: #16294a; color: #fff; }
.sidebar nav a.active { background: #16294a; color: #fff; border-left-color: #1f6feb; }
.sidebar .foot { padding: 14px 20px; font-size: 12px; color: #6b7a9c; border-top: 1px solid #1c2d4d; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 56px; background: #fff; border-bottom: 1px solid #e6eaf2; display: flex;
  align-items: center; justify-content: space-between; padding: 0 22px;
}
.topbar h2 { margin: 0; font-size: 17px; font-weight: 600; }
.topbar .user { font-size: 13px; color: #46506a; display:flex; align-items:center; gap:10px; }
.content { padding: 22px; overflow: auto; }

/* 卡片 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; }
.card { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(20,40,80,.05); }
.card .num { font-size: 30px; font-weight: 700; line-height: 1.1; }
.card .label { color: #8a93a8; font-size: 13px; margin-top: 6px; }
.card.blue .num { color: #1f6feb; }
.card.green .num { color: #1e9e57; }
.card.red .num { color: #e0524a; }
.card.orange .num { color: #e0892b; }

/* 面板 */
.panel { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(20,40,80,.05); margin-bottom: 18px; }
.panel h3 { margin: 0 0 14px; font-size: 15px; }
.panel .ph { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.panel .ph h3 { margin:0; }

/* 表格 */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eef1f7; }
th { color: #8a93a8; font-weight: 600; background: #fafbfe; }
tr:hover td { background: #f8faff; }

/* 徽章 */
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; line-height: 1.6; }
.badge.online, .badge.ok, .badge.green { background: #e6f7ee; color: #1e9e57; }
.badge.offline, .badge.red { background: #fdecec; color: #c0392b; }
.badge.warning, .badge.orange { background: #fdf3e3; color: #b9772a; }
.badge.gray, .badge.info { background: #eef1f7; color: #6b7a9c; }
.badge.critical { background: #fdecec; color: #c0392b; font-weight: 600; }

/* 按钮 */
.btn { display: inline-block; border: 1px solid #d6dbe8; background: #fff; color: #2a3550; padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.btn:hover { border-color: #1f6feb; color: #1f6feb; }
.btn.primary { background: #1f6feb; color: #fff; border-color: #1f6feb; }
.btn.primary:hover { background: #175cd1; color: #fff; }
.btn.danger { background: #fff; color: #c0392b; border-color: #f0c2c2; }
.btn.danger:hover { background: #fdecec; }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 表单 */
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 13px; margin-bottom: 6px; color: #46506a; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #d6dbe8; border-radius: 8px; font-size: 14px; background:#fff;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: #1f6feb; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hint { font-size: 12px; color: #8a93a8; margin-top: 4px; }
.muted { color: #8a93a8; }

/* 模态 */
.modal-mask { position: fixed; inset: 0; background: rgba(15,31,61,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: #fff; border-radius: 12px; width: 560px; max-width: 94vw; max-height: 90vh; overflow: auto; box-shadow: 0 16px 50px rgba(0,0,0,.25); }
.modal .m-head { padding: 16px 20px; border-bottom: 1px solid #eef1f7; font-size: 16px; font-weight: 600; display:flex; justify-content:space-between; align-items:center; }
.modal .m-body { padding: 20px; }
.modal .m-foot { padding: 14px 20px; border-top: 1px solid #eef1f7; text-align: right; }

/* 登录页 */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#1f6feb,#0b3d91); }
.login-box { background: #fff; border-radius: 14px; padding: 34px 34px 30px; width: 360px; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.login-box h1 { margin: 0 0 4px; font-size: 19px; }
.login-box .sub { color: #8a93a8; font-size: 13px; margin-bottom: 22px; }
.login-box .btn { width: 100%; padding: 11px; font-size: 15px; }

/* 工具 */
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.gap { gap: 10px; }
.mt { margin-top: 14px; }
.right { text-align: right; }
.empty { text-align: center; color: #8a93a8; padding: 30px; }
.tag { display:inline-block; background:#eef1f7; color:#46506a; padding:1px 8px; border-radius:6px; font-size:12px; margin:2px 4px 2px 0; }
.pager { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:14px; font-size:13px; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#1e9e57; display:inline-block; margin-right:6px; box-shadow:0 0 0 3px rgba(30,158,87,.2); }
.live-dot.off { background:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.2); }
video { width: 100%; background: #000; border-radius: 10px; display: block; }

/* 行内代码（参数展示） */
code { background:#eef1f7; color:#1f2533; padding:2px 7px; border-radius:6px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size:12.5px; }

/* 设备授权勾选列表 */
.dev-pick { max-height: 240px; overflow: auto; border: 1px solid #e6eaf2; border-radius: 8px; padding: 10px 12px; }
.dev-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; border-bottom: 1px solid #f2f4f9; }
.dev-item:last-child { border-bottom: 0; }

/* 移动端汉堡按钮 / 遮罩（桌面隐藏） */
.hamburger { display: none; }
.overlay { display: none; }

@media (max-width: 860px) {
  .layout { display: block; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 220px; z-index: 60;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
  }
  .sidebar.show { transform: translateX(0); }
  .overlay.show { display: block; position: fixed; inset: 0; background: rgba(15,31,61,.45); z-index: 55; }
  .main { margin-left: 0; }
  .topbar { padding: 0 14px; }
  .topbar h2 { font-size: 15px; }
  .hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-right: 10px; border: 1px solid #d6dbe8;
    background: #fff; border-radius: 8px; font-size: 18px; cursor: pointer; color: #2a3550;
  }
  .content { padding: 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .modal { width: 94vw; }
  .login-box { width: auto; max-width: 94vw; }
  .user .btn { padding: 4px 8px; }
}