/* 安邻智守 · 后台管理样式 */
:root {
  --primary: #1E9FFF;
  --sidebar-bg: #28333e;
  --sidebar-active: #1E9FFF;
  --header-bg: #ffffff;
  --body-bg: #f2f3f5;
  --text: #333;
  --text-light: #8a98a9;
  --border: #e6e6e6;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; color: var(--text); background: var(--body-bg); }
a { text-decoration: none; color: inherit; }

/* ===== 布局 ===== */
.layout { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: 220px; background: var(--sidebar-bg); color: #c5cfda; display: flex; flex-direction: column; transition: width .2s; }
.sidebar.collapsed { width: 0; overflow: hidden; }
.sidebar .logo { height: 56px; line-height: 56px; text-align: center; font-size: 18px; font-weight: 700; color: #fff; background: #202a33; letter-spacing: 2px; white-space: nowrap; }
.sidebar .menu { flex: 1; overflow-y: auto; padding: 8px 0; }
.sidebar .menu ul { list-style: none; margin: 0; padding: 0; }
.sidebar .menu li.item { }
.sidebar .menu .item > .title { display: flex; align-items: center; padding: 12px 18px; cursor: pointer; font-size: 14px; transition: background .15s; }
.sidebar .menu .item > .title:hover { background: #323f4b; color: #fff; }
.sidebar .menu .item.active > .title { background: var(--sidebar-active); color: #fff; }
.sidebar .menu .item .title .layui-icon { margin-right: 10px; font-size: 16px; }
.sidebar .menu .children { display: none; background: #202a33; }
.sidebar .menu .item.open > .children { display: block; }
.sidebar .menu .children li { padding: 10px 18px 10px 44px; cursor: pointer; font-size: 13px; color: #aab4c0; }
.sidebar .menu .children li:hover, .sidebar .menu .children li.active { color: #fff; background: #323f4b; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.header { height: 56px; background: var(--header-bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.header .collapse-btn { font-size: 20px; cursor: pointer; color: #555; margin-right: 16px; }
.header .title-text { font-size: 16px; font-weight: 600; flex: 1; }
.header .right { display: flex; align-items: center; gap: 14px; }
.header .user { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.header .user .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; text-align: center; line-height: 30px; font-size: 14px; }
.header .theme-btn, .header .fullscreen-btn { cursor: pointer; color: #555; font-size: 18px; }
.header .logout-btn { color: #ff5722; cursor: pointer; font-size: 14px; }

.tabs { height: 40px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 8px; gap: 4px; overflow-x: auto; }
.tabs .tab { padding: 0 14px; height: 32px; line-height: 32px; background: #f2f3f5; border-radius: 4px; cursor: pointer; font-size: 13px; white-space: nowrap; position: relative; }
.tabs .tab.active { background: var(--primary); color: #fff; }
.tabs .tab .close { margin-left: 8px; opacity: .6; }
.tabs .tab .close:hover { opacity: 1; }

.content { flex: 1; position: relative; background: var(--body-bg); }
.content iframe { width: 100%; height: 100%; border: 0; display: none; background: #fff; }
.content iframe.active { display: block; }

/* ===== 登录 ===== */
.login-mask { position: fixed; inset: 0; background: linear-gradient(135deg, #1e3c72, #2a5298); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.login-box { width: 360px; background: #fff; border-radius: 10px; padding: 36px 32px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.login-box h2 { margin: 0 0 6px; text-align: center; color: #1e3c72; }
.login-box .sub { text-align: center; color: #999; font-size: 13px; margin-bottom: 24px; }
.login-box .layui-form-item { margin-bottom: 20px; }
.login-box .btn-login { width: 100%; background: #1e3c72; }

/* ===== 暗色主题 ===== */
body.theme-dark { --body-bg: #1f2430; --header-bg: #2a3140; --border: #3a4254; --text: #d5dbe5; }
body.theme-dark .tabs { background: #2a3140; }
body.theme-dark .tabs .tab { background: #353d4e; color: #c5ccd8; }
body.theme-dark .content iframe { background: #1f2430; }
body.theme-dark .login-box { background: #2a3140; color: #eee; }
body.theme-dark .login-box h2 { color: #6fb4ff; }

/* 卡片 */
.panel { background: #fff; border-radius: 8px; padding: 16px; margin: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
body.theme-dark .panel { background: #2a3140; }
.panel-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.panel-title:before { content: ""; width: 4px; height: 16px; background: var(--primary); border-radius: 2px; }

/* 大屏 */
.bigscreen { background: #0b1f3a; color: #cfe3ff; height: 100vh; overflow: hidden; }
.bigscreen .bs-header { height: 70px; background: url('') ; text-align: center; position: relative; border-bottom: 2px solid #1b3c66; }
.bigscreen .bs-header h1 { margin: 0; line-height: 70px; font-size: 30px; letter-spacing: 4px; color: #58b6ff; text-shadow: 0 0 12px #1e5fb0; }
.bigscreen .bs-header .clock { position: absolute; right: 24px; top: 24px; font-size: 16px; color: #9fd0ff; }
.bigscreen .bs-kpi { display: flex; gap: 14px; padding: 16px; }
.bigscreen .kpi-card { flex: 1; background: linear-gradient(180deg,#10325c,#0b1f3a); border: 1px solid #1b3c66; border-radius: 8px; padding: 14px; text-align: center; }
.bigscreen .kpi-card .v { font-size: 30px; font-weight: 700; color: #58e0ff; }
.bigscreen .kpi-card .l { font-size: 13px; color: #9fd0ff; margin-top: 6px; }
.bigscreen .bs-body { display: flex; gap: 16px; padding: 0 16px 16px; height: calc(100vh - 70px - 120px); }
.bigscreen .bs-col { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bigscreen .bs-panel { background: linear-gradient(180deg,#0e2a4d,#0b1f3a); border: 1px solid #1b3c66; border-radius: 8px; padding: 12px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bigscreen .bs-panel h3 { margin: 0 0 8px; font-size: 15px; color: #58b6ff; border-left: 3px solid #58b6ff; padding-left: 8px; }
.bigscreen .bs-panel .chart { flex: 1; min-height: 0; }
.bigscreen .bs-list { flex: 1; overflow-y: auto; }
.bigscreen .bs-list li { list-style: none; padding: 8px 6px; border-bottom: 1px dashed #1b3c66; font-size: 13px; display: flex; justify-content: space-between; }
.bigscreen .bs-list li span.time { color: #7fb6ff; }