/* ====== 设计变量 ====== */
:root {
  --c-primary: #1890ff;
  --c-primary-dark: #096dd9;
  --c-primary-light: #e6f7ff;
  --c-success: #52c41a;
  --c-success-light: #f6ffed;
  --c-warning: #faad14;
  --c-warning-light: #fffbe6;
  --c-danger: #f5222d;
  --c-danger-light: #fff1f0;
  --c-orange: #fa8c16;
  --c-orange-light: #fff7e6;

  --c-bg: #f0f2f5;
  --c-bg-card: #ffffff;
  --c-sidebar: #001529;
  --c-sidebar-hover: #000c17;
  --c-text: #333333;
  --c-text-secondary: #666666;
  --c-text-light: #999999;
  --c-border: #e8e8e8;
  --c-border-light: #f0f0f0;

  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.1);
  --sidebar-w: 220px;
  --topbar-h: 56px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; font-size:14px; color:var(--c-text); background:var(--c-bg); }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; border:none; outline:none; }
input, select, textarea { font-family:inherit; font-size:14px; outline:none; }

/* ====== 登录页 ====== */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #001529 0%, #003a70 50%, #0050a0 100%); }
.login-box { width:400px; background:#fff; border-radius:var(--radius-lg); padding:40px; box-shadow:var(--shadow-lg); }
.login-logo { font-size:22px; font-weight:600; text-align:center; color:var(--c-primary); }
.login-sub { font-size:13px; text-align:center; color:var(--c-text-light); margin-top:6px; margin-bottom:30px; }
.login-form .form-group { margin-bottom:18px; }
.login-form label { display:block; margin-bottom:6px; font-size:13px; color:var(--c-text-secondary); }
.login-form input, .login-form select { width:100%; height:40px; border:1px solid var(--c-border); border-radius:var(--radius); padding:0 12px; transition:border-color .2s; }
.login-form input:focus, .login-form select:focus { border-color:var(--c-primary); }
.login-hint { font-size:12px; color:var(--c-text-light); text-align:center; margin-top:14px; }

/* ====== 按钮 ====== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:4px; height:34px; padding:0 16px; border-radius:var(--radius); font-size:14px; transition:all .2s; white-space:nowrap; }
.btn-primary { background:var(--c-primary); color:#fff; }
.btn-primary:hover { background:var(--c-primary-dark); }
.btn-default { background:#fff; border:1px solid var(--c-border); color:var(--c-text); }
.btn-default:hover { border-color:var(--c-primary); color:var(--c-primary); }
.btn-danger { background:var(--c-danger); color:#fff; }
.btn-danger:hover { opacity:.85; }
.btn-block { width:100%; height:40px; }
.btn-sm { height:28px; padding:0 10px; font-size:13px; }
.btn-link { background:none; color:var(--c-primary); padding:0; height:auto; font-size:13px; }
.btn-link:hover { color:var(--c-primary-dark); text-decoration:underline; }

/* ====== 主布局 ====== */
.main-app { display:flex; min-height:100vh; }

/* 侧边栏 */
.sidebar { width:var(--sidebar-w); background:var(--c-sidebar); display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:100; }
.sidebar-logo { height:var(--topbar-h); display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:600; border-bottom:1px solid rgba(255,255,255,0.08); }
.sidebar-nav { flex:1; padding:12px 0; overflow-y:auto; }
.nav-item { display:flex; align-items:center; gap:10px; padding:0 24px; height:44px; color:rgba(255,255,255,0.7); font-size:14px; transition:all .2s; position:relative; }
.nav-item:hover { color:#fff; background:var(--c-sidebar-hover); }
.nav-item.active { color:#fff; background:var(--c-primary); }
.nav-icon { font-size:10px; }
.nav-badge { position:absolute; right:16px; top:50%; transform:translateY(-50%); background:var(--c-danger); color:#fff; font-size:11px; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.sidebar-footer { padding:12px 16px; border-top:1px solid rgba(255,255,255,0.08); }
.user-info { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.user-avatar { width:36px; height:36px; border-radius:50%; background:var(--c-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; }
.user-detail { flex:1; }
.user-name { color:#fff; font-size:13px; }
.user-role { color:rgba(255,255,255,0.5); font-size:12px; }
.btn-logout { width:100%; height:30px; background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.7); border-radius:var(--radius); font-size:13px; }
.btn-logout:hover { background:rgba(255,255,255,0.15); color:#fff; }

/* 内容区 */
.content { flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-height:100vh; }
.topbar { height:var(--topbar-h); background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid var(--c-border); position:sticky; top:0; z-index:50; }
.topbar h1 { font-size:17px; font-weight:600; }
.topbar-time { font-size:13px; color:var(--c-text-light); }
#page-container { flex:1; padding:20px 24px; }

/* ====== 通用组件 ====== */
.card { background:var(--c-bg-card); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:20px; margin-bottom:16px; }
.card-title { font-size:15px; font-weight:600; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }

/* 统计卡片 */
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.stat-card { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:20px; display:flex; align-items:center; gap:16px; }
.stat-icon { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.stat-icon.blue { background:var(--c-primary-light); color:var(--c-primary); }
.stat-icon.green { background:var(--c-success-light); color:var(--c-success); }
.stat-icon.red { background:var(--c-danger-light); color:var(--c-danger); }
.stat-icon.orange { background:var(--c-orange-light); color:var(--c-orange); }
.stat-info .stat-value { font-size:26px; font-weight:700; line-height:1.2; }
.stat-info .stat-label { font-size:13px; color:var(--c-text-light); margin-top:2px; }

/* 状态标签 */
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:12px; font-size:12px; line-height:1.6; }
.badge-success { background:var(--c-success-light); color:var(--c-success); }
.badge-danger { background:var(--c-danger-light); color:var(--c-danger); }
.badge-warning { background:var(--c-warning-light); color:var(--c-warning); }
.badge-orange { background:var(--c-orange-light); color:var(--c-orange); }
.badge-purple { background:#f0e6ff; color:#722ed1; }
.badge-default { background:#f5f5f5; color:var(--c-text-secondary); }
.badge-blue { background:var(--c-primary-light); color:var(--c-primary); }

/* 表格 */
.table-wrap { overflow-x:auto; }
table.data-table { width:100%; border-collapse:collapse; font-size:14px; }
.data-table th { background:#fafafa; text-align:left; padding:12px 16px; font-weight:500; color:var(--c-text-secondary); border-bottom:1px solid var(--c-border); white-space:nowrap; }
.data-table td { padding:12px 16px; border-bottom:1px solid var(--c-border-light); }
.data-table tr:hover { background:#fafafa; }
.data-table .td-actions { display:flex; gap:8px; }

/* 表单 */
.form-row { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:16px; }
.form-row.single { grid-template-columns:1fr; }
.form-row.triple { grid-template-columns:repeat(3,1fr); }
.form-item label { display:block; margin-bottom:6px; font-size:13px; color:var(--c-text-secondary); }
.form-item input, .form-item select, .form-item textarea {
  width:100%; height:36px; border:1px solid var(--c-border); border-radius:var(--radius); padding:0 12px; transition:border-color .2s;
}
.form-item textarea { height:80px; padding:8px 12px; resize:vertical; }
.form-item input:focus, .form-item select:focus, .form-item textarea:focus { border-color:var(--c-primary); }

/* 项目卡片 */
.project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.project-card { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; cursor:pointer; transition:transform .2s, box-shadow .2s; }
.project-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.project-card-header { padding:16px 20px; border-bottom:1px solid var(--c-border-light); display:flex; justify-content:space-between; align-items:start; }
.project-card-title { font-size:15px; font-weight:600; }
.project-card-body { padding:16px 20px; }
.project-meta { display:flex; gap:20px; margin-bottom:12px; }
.project-meta-item { font-size:13px; }
.project-meta-item .label { color:var(--c-text-light); }
.project-meta-item .value { color:var(--c-text); font-weight:500; }
.progress-bar { height:6px; background:#f0f0f0; border-radius:3px; margin-top:8px; overflow:hidden; }
.progress-bar-fill { height:100%; background:var(--c-primary); border-radius:3px; transition:width .3s; }

/* 标签页 */
.tabs { display:flex; gap:0; border-bottom:1px solid var(--c-border); margin-bottom:20px; }
.tab { padding:10px 20px; cursor:pointer; font-size:14px; color:var(--c-text-secondary); border-bottom:2px solid transparent; transition:all .2s; }
.tab:hover { color:var(--c-primary); }
.tab.active { color:var(--c-primary); border-bottom-color:var(--c-primary); font-weight:500; }

/* 监控网格 */
.camera-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.camera-card { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
.camera-preview { height:180px; background:#1a1a1a; display:flex; align-items:center; justify-content:center; position:relative; }
.camera-preview .placeholder { color:#666; font-size:13px; text-align:center; }
.camera-status-dot { position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:50%; }
.camera-status-dot.online { background:var(--c-success); box-shadow:0 0 6px var(--c-success); }
.camera-status-dot.offline { background:var(--c-danger); }
.camera-info { padding:12px 16px; }
.camera-name { font-size:14px; font-weight:500; margin-bottom:4px; }
.camera-meta { font-size:12px; color:var(--c-text-light); }

/* 图片网格 */
.image-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.image-item { border-radius:var(--radius); overflow:hidden; cursor:pointer; aspect-ratio:1; background:#f0f0f0; position:relative; }
.image-item img { width:100%; height:100%; object-fit:cover; }
.image-item .img-tag { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.6); color:#fff; font-size:11px; padding:4px 8px; }

/* 时间线 */
.timeline { position:relative; padding-left:24px; }
.timeline::before { content:''; position:absolute; left:8px; top:4px; bottom:4px; width:2px; background:var(--c-border); }
.timeline-item { position:relative; padding-bottom:20px; }
.timeline-item::before { content:''; position:absolute; left:-20px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--c-primary); border:2px solid #fff; }
.timeline-item.warning::before { background:var(--c-warning); }
.timeline-item.danger::before { background:var(--c-danger); }
.timeline-item.success::before { background:var(--c-success); }
.timeline-time { font-size:12px; color:var(--c-text-light); }
.timeline-title { font-size:14px; font-weight:500; margin:2px 0; }
.timeline-desc { font-size:13px; color:var(--c-text-secondary); }

/* 弹窗 */
.modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:1000; display:flex; align-items:center; justify-content:center; }
.modal-content { background:#fff; border-radius:var(--radius-lg); padding:24px; max-width:680px; width:90%; max-height:85vh; overflow-y:auto; }
.modal-content.modal-image { background:none; padding:0; }
.modal-content.modal-image img { max-width:90vw; max-height:85vh; border-radius:var(--radius); }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.modal-title { font-size:16px; font-weight:600; }
.modal-close { font-size:22px; color:var(--c-text-light); cursor:pointer; line-height:1; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* 巡查图片预览弹窗 */
#log-image-modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:2000; display:flex; align-items:center; justify-content:center; }

/* 筛选栏 */
.filter-bar { display:flex; gap:12px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.filter-bar select, .filter-bar input { height:34px; border:1px solid var(--c-border); border-radius:var(--radius); padding:0 10px; min-width:140px; }

/* 空状态 */
.empty-state { text-align:center; padding:60px 20px; color:var(--c-text-light); }
.empty-state .empty-icon { font-size:40px; margin-bottom:12px; }
.empty-state .empty-text { font-size:14px; }

/* 分段标题 */
.section-title { font-size:14px; font-weight:600; margin:20px 0 12px; color:var(--c-text); }

/* 工具类 */
.text-danger { color:var(--c-danger); }
.text-success { color:var(--c-success); }
.text-warning { color:var(--c-warning); }
.text-secondary { color:var(--c-text-secondary); }
.text-light { color:var(--c-text-light); }
.flex { display:flex; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.gap-8 { gap:8px; }
.gap-16 { gap:16px; }
.mb-16 { margin-bottom:16px; }
.mt-16 { margin-top:16px; }

/* ====== 数据大屏 ====== */
.kpi-card { transition:transform .2s, box-shadow .2s; }
.kpi-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.chart-row { display:grid; gap:16px; margin-bottom:16px; }
.chart-row-3 { grid-template-columns:repeat(3,1fr); }
.chart-row-2 { grid-template-columns:repeat(2,1fr); }
.chart-card { padding:16px 20px 12px; margin-bottom:0; }
.chart-card .card-title { margin-bottom:8px; font-size:14px; }
.chart-sub { font-size:12px; color:var(--c-text-light); font-weight:normal; }
.chart-box { width:100%; height:280px; }

/* 中等屏幕退化为 2 列 */
@media (max-width:1400px) {
  .chart-row-3 { grid-template-columns:repeat(2,1fr); }
}
/* 小屏退化为单列 */
@media (max-width:900px) {
  .chart-row-3, .chart-row-2 { grid-template-columns:1fr; }
  .chart-box { height:240px; }
}

/* ====== 移动端汉堡菜单按钮（默认隐藏，小屏显示） ====== */
.menu-toggle { display:none; width:36px; height:36px; background:none; border:none; font-size:20px; color:var(--c-text); cursor:pointer; align-items:center; justify-content:center; }
.topbar-left { display:flex; align-items:center; gap:12px; }
.sidebar-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.4); z-index:99; }
.sidebar-overlay.show { display:block; }

/* ====== 平板适配 (≤1024px) ====== */
@media (max-width:1024px) {
  .stat-row { grid-template-columns:repeat(2,1fr); }
  .form-row.triple { grid-template-columns:repeat(2,1fr); }
  .project-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
  .camera-grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
}

/* ====== 移动端适配 (≤768px) ====== */
@media (max-width:768px) {
  /* 汉堡菜单显示 */
  .menu-toggle { display:flex; }
  /* 侧边栏改为抽屉式 */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
  }
  .sidebar.open { transform: translateX(0); }
  /* 内容区全宽 */
  .content { margin-left:0; }
  /* 顶部栏 */
  .topbar { padding:0 12px; }
  .topbar h1 { font-size:15px; }
  .topbar-time { font-size:11px; }
  /* 内容区 padding 缩小 */
  #page-container { padding:12px; }
  /* 卡片 padding 缩小 */
  .card { padding:14px; margin-bottom:12px; }
  .card-title { font-size:14px; margin-bottom:12px; }
  /* KPI 卡片单列 */
  .stat-row { grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:12px; }
  .stat-card { padding:14px; gap:10px; }
  .stat-icon { width:40px; height:40px; font-size:18px; }
  .stat-info .stat-value { font-size:22px; }
  .stat-info .stat-label { font-size:12px; }
  /* 图表全宽 */
  .chart-row-3, .chart-row-2 { grid-template-columns:1fr; }
  .chart-box { height:220px; }
  .chart-card { padding:12px 14px 8px; }
  /* 表单单列 */
  .form-row, .form-row.triple { grid-template-columns:1fr; }
  /* 项目卡片单列 */
  .project-grid { grid-template-columns:1fr; }
  /* 监控卡片单列 */
  .camera-grid { grid-template-columns:1fr; }
  /* 表格横向滚动 + 字体缩小 */
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .data-table { font-size:13px; }
  .data-table th, .data-table td { padding:8px 10px; white-space:nowrap; }
  /* 弹窗全宽 */
  .modal-content { width:95%; padding:16px; max-height:90vh; }
  /* 筛选栏纵向排列 */
  .filter-bar { flex-direction:column; align-items:stretch; }
  .filter-bar select, .filter-bar input { width:100%; min-width:0; }
  /* 图片网格 2 列 */
  .image-grid { grid-template-columns:repeat(2,1fr); }
  /* 登录页适配 */
  .login-box { width:92%; padding:28px 20px; }
  .login-logo { font-size:20px; }
  /* 巡查图片预览网格 3 列 */
  #log-preview-grid { grid-template-columns:repeat(3,1fr) !important; }
  /* 标签页横向滚动 */
  .tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tab { white-space:nowrap; padding:10px 14px; }
  /* 项目元数据纵向 */
  .project-meta { flex-direction:column; gap:6px; }
}

/* ====== 超小屏适配 (≤480px) ====== */
@media (max-width:480px) {
  /* KPI 卡片单列 */
  .stat-row { grid-template-columns:1fr; }
  /* 图片网格单列 */
  .image-grid { grid-template-columns:1fr; }
  #log-preview-grid { grid-template-columns:repeat(2,1fr) !important; }
  /* 顶部栏标题缩小 */
  .topbar h1 { font-size:14px; }
  .topbar-time { display:none; }
  /* 登录页 */
  .login-box { padding:24px 16px; }
  .login-logo { font-size:18px; }
  .login-sub { font-size:12px; }
}