/* ========== 设备管理系统 样式 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: #333; background: #f0f2f5; font-size: 14px; }
a { color: #1890ff; text-decoration: none; }
a:hover { color: #40a9ff; }

/* ========== 登录页 ========== */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a3a6b 0%, #2c5282 50%, #2b6cb0 100%); position: relative; overflow: hidden; }
.login-page::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%); animation: pulse 4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.login-box { width: 420px; background: #fff; border-radius: 12px; padding: 48px 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); position: relative; z-index: 1; }
.login-logo { text-align: center; margin-bottom: 32px; }
.login-logo .icon { font-size: 48px; margin-bottom: 8px; }
.login-logo h1 { font-size: 24px; color: #1a3a6b; }
.login-form .form-group { margin-bottom: 20px; }
.login-form label { display: block; margin-bottom: 8px; color: #555; font-weight: 500; }
.login-form input[type="text"],
.login-form input[type="password"] { width: 100%; padding: 12px 16px; border: 1px solid #d9d9d9; border-radius: 6px; font-size: 15px; transition: all 0.3s; }
.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus { outline: none; border-color: #1890ff; box-shadow: 0 0 0 3px rgba(24,144,255,0.1); }
.login-form .btn-primary { width: 100%; padding: 12px; background: #1890ff; color: #fff; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; transition: all 0.3s; }
.login-form .btn-primary:hover { background: #40a9ff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(24,144,255,0.3); }
.login-error { color: #ff4d4f; font-size: 13px; margin-top: 8px; text-align: center; min-height: 20px; }
.login-form .form-row { display: flex; align-items: center; margin-bottom: 14px; font-size: 13px; color: #666; }
.login-form .remember { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; margin-bottom: 0; font-weight: normal; font-size: 12px; line-height: 1; }
.login-form .remember input[type="checkbox"] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; width: 16px; height: 16px; cursor: pointer; margin: 0; padding: 0; accent-color: #1890ff; vertical-align: middle; }

/* ========== 主布局 ========== */
.app-container { display: flex; min-height: 100vh; }
.sidebar { width: 220px; background: #001529; color: #fff; flex-shrink: 0; display: flex; flex-direction: column; }
.sidebar-header { padding: 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sidebar-header .logo { font-size: 28px; }
.sidebar-header .logo-text { font-size: 16px; font-weight: 600; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.menu-item { position: relative; }
.menu-link { display: flex; align-items: center; padding: 12px 20px; color: rgba(255,255,255,0.75); transition: all 0.2s; text-decoration: none; }
.menu-link:hover { color: #fff; background: rgba(255,255,255,0.06); }
.menu-item.active > .menu-link { color: #fff; background: #1890ff; }
.menu-item.active > .menu-link::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #40a9ff; }
.menu-icon { margin-right: 10px; font-size: 16px; width: 20px; text-align: center; }
.menu-text { flex: 1; }
.menu-arrow { transition: transform 0.2s; font-size: 12px; }
.menu-item.has-children.open > .menu-link .menu-arrow { transform: rotate(90deg); }
.sub-menu { display: none; background: rgba(0,0,0,0.15); }
.sub-menu.open, .menu-item.has-children.open .sub-menu { display: block; }
.sub-menu-item { display: block; padding: 10px 20px 10px 50px; color: rgba(255,255,255,0.65); font-size: 13px; transition: all 0.2s; }
.sub-menu-item:hover { color: #fff; background: rgba(255,255,255,0.06); }
.sub-menu-item.active { color: #fff; background: #1890ff; }

/* 三级子菜单 */
.sub-menu-group { }
.sub-menu-group > .sub-menu-item.has-children { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.menu-arrow-small { font-size: 10px; transition: transform 0.2s; }
.sub-menu-group.open .menu-arrow-small { transform: rotate(90deg); }
.sub-sub-menu { display: none; background: rgba(0,0,0,0.2); }
.sub-sub-menu.open, .sub-menu-group.open .sub-sub-menu { display: block; }
.sub-sub-menu-item { display: block; padding: 8px 20px 8px 70px; color: rgba(255,255,255,0.55); font-size: 12px; transition: all 0.2s; }
.sub-sub-menu-item:hover { color: #fff; background: rgba(255,255,255,0.06); }
.sub-sub-menu-item.active { color: #fff; background: #1890ff; }

/* ========== 主内容 ========== */
.main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.top-bar { height: 56px; background: #fff; border-bottom: 1px solid #e8e8e8; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; box-shadow: 0 1px 4px rgba(0,21,41,0.08); }
.breadcrumb { display: flex; align-items: center; gap: 8px; }
.breadcrumb-item { color: #999; font-size: 14px; }
.breadcrumb-item.active { color: #333; font-weight: 500; }
.breadcrumb-sep { color: #ccc; }
.top-actions .user-info { display: flex; align-items: center; gap: 16px; }
.user-name { font-weight: 500; color: #333; }
.logout-btn { color: #ff4d4f; font-size: 13px; }
.logout-btn:hover { color: #ff7875; }

.content-wrapper { flex: 1; padding: 20px; overflow: auto; }

/* ========== 卡片 ========== */
.card { background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.card-header { padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
.card-header h3 { font-size: 16px; font-weight: 600; color: #333; }
.card-body { padding: 20px; }

/* ========== 统计卡片 ========== */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); display: flex; align-items: center; gap: 16px; transition: transform 0.2s, box-shadow 0.2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.stat-icon { width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.stat-icon.blue { background: #e6f7ff; color: #1890ff; }
.stat-icon.green { background: #f6ffed; color: #52c41a; }
.stat-icon.orange { background: #fff7e6; color: #fa8c16; }
.stat-icon.red { background: #fff1f0; color: #ff4d4f; }
.stat-icon.purple { background: #f9f0ff; color: #722ed1; }
.stat-info .stat-value { font-size: 28px; font-weight: 600; color: #333; line-height: 1.2; }
.stat-info .stat-label { font-size: 13px; color: #999; margin-top: 4px; }

/* ========== 按钮 ========== */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 16px; border-radius: 4px; font-size: 14px; cursor: pointer; border: 1px solid #d9d9d9; background: #fff; color: #333; transition: all 0.2s; text-decoration: none; gap: 4px; }
.btn:hover { border-color: #40a9ff; color: #40a9ff; }
.btn-primary { background: #1890ff; border-color: #1890ff; color: #fff; }
.btn-primary:hover { background: #40a9ff; border-color: #40a9ff; color: #fff; }
.btn-success { background: #52c41a; border-color: #52c41a; color: #fff; }
.btn-success:hover { background: #73d13d; border-color: #73d13d; }
.btn-danger { background: #ff4d4f; border-color: #ff4d4f; color: #fff; }
.btn-danger:hover { background: #ff7875; border-color: #ff7875; }
.btn-warning { background: #fa8c16; border-color: #fa8c16; color: #fff; }
.btn-warning:hover { background: #ffa940; border-color: #ffa940; }
.btn-cancel { background: #fff; border-color: #d9d9d9; color: #333; }
.btn-cancel:hover { border-color: #bfbfbf; color: #666; }
.btn-login { width: 100%; padding: 12px; background: #1890ff; color: #fff; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; transition: all 0.3s; justify-content: center; }
.btn-login:hover { background: #40a9ff; }
.btn-block { width: 100%; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-lg { padding: 10px 24px; font-size: 16px; }

/* ========== 表格 ========== */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: #fafafa; padding: 12px 16px; text-align: left; font-weight: 500; color: #333; border-bottom: 1px solid #f0f0f0; white-space: nowrap; }
.data-table td { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; color: #555; }
.data-table tr:hover td { background: #fafafa; }
.data-table .checkbox-cell { width: 40px; text-align: center; }
.table-actions { display: flex; gap: 8px; }

/* ========== 搜索表单 ========== */
.search-form { background: #fff; padding: 16px 20px; border-radius: 8px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.search-form .form-row { display: flex; flex-wrap: wrap; gap: 16px; }
.search-form .form-item { display: flex; align-items: center; gap: 8px; }
.search-form label { color: #555; white-space: nowrap; }
.search-form input, .search-form select { padding: 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; min-width: 160px; }
.search-form input:focus, .search-form select:focus { outline: none; border-color: #40a9ff; box-shadow: 0 0 0 2px rgba(24,144,255,0.1); }
.search-actions { display: flex; gap: 8px; margin-top: 16px; }

/* ========== 状态标签 ========== */
.status-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.status-online { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
.status-offline { background: #f5f5f5; color: #8c8c8c; border: 1px solid #d9d9d9; }
.status-fault { background: #fff1f0; color: #ff4d4f; border: 1px solid #ffa39e; }
.status-maintenance { background: #fff7e6; color: #fa8c16; border: 1px solid #ffd591; }
.status-used { background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; }
.status-unused { background: #fff7e6; color: #fa8c16; border: 1px solid #ffd591; }

/* ========== 分页 ========== */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 16px; }
.page-btn { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid #d9d9d9; background: #fff; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.2s; }
.page-btn:hover:not(:disabled) { border-color: #40a9ff; color: #40a9ff; }
.page-btn.active { background: #1890ff; border-color: #1890ff; color: #fff; }
.page-btn:disabled { cursor: not-allowed; color: #ccc; }
.page-ellipsis { color: #999; }

/* ========== 模态框 ========== */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: #fff; border-radius: 8px; width: 520px; max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.modal-header { padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 16px; font-weight: 600; }
.modal-close { cursor: pointer; font-size: 20px; color: #999; border: none; background: none; }
.modal-close:hover { color: #333; }
.modal-body { padding: 20px; }
.modal-footer { padding: 12px 20px; border-top: 1px solid #f0f0f0; display: flex; justify-content: flex-end; gap: 8px; }

/* ========== 表单 ========== */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; color: #555; font-weight: 500; }
.form-group label .required { color: #ff4d4f; margin-left: 2px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #40a9ff; box-shadow: 0 0 0 2px rgba(24,144,255,0.1); }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ========== 大屏 ========== */
.dashboard { display: grid; grid-template-columns: 300px 1fr; gap: 16px; height: calc(100vh - 96px); }
.dashboard-panel { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: auto; }
.dashboard-panel h3 { font-size: 15px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }
#map-container { width: 100%; height: 100%; min-height: 500px; border-radius: 8px; }
.map-marker { position: relative; }
.map-marker .marker-label { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); background: #1890ff; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; }
.map-marker .marker-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.map-marker.online .marker-dot { background: #52c41a; }
.map-marker.offline .marker-dot { background: #8c8c8c; }
.map-marker.fault .marker-dot { background: #ff4d4f; }
.map-marker.maintenance .marker-dot { background: #fa8c16; }

/* ========== Toast ========== */
.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); padding: 10px 20px; border-radius: 4px; color: #fff; z-index: 2000; animation: slideDown 0.3s ease-out; }
.toast.success { background: #52c41a; }
.toast.error { background: #ff4d4f; }
.toast.info { background: #1890ff; }
@keyframes slideDown { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ========== 工具栏 ========== */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.toolbar-left { display: flex; gap: 8px; }
.toolbar-right { display: flex; gap: 8px; }

/* ========== 二维码 ========== */
.qrcode-modal { text-align: center; }
.qrcode-modal img { max-width: 200px; border: 1px solid #f0f0f0; border-radius: 4px; }
.qrcode-modal p { margin-top: 12px; color: #666; }

/* ========== 空状态 ========== */
.empty-state { text-align: center; padding: 40px 20px; color: #999; }
.empty-state .icon { font-size: 48px; margin-bottom: 8px; }

/* ========== 响应式：平板/小笔电 ========== */
@media (max-width: 768px) {
    /* 侧边栏：汉堡模式（仅显示图标，宽64px） */
    .sidebar { width: 64px; }
    .sidebar-header { justify-content: center; padding: 16px 8px; }
    .sidebar-header .logo-text, .menu-text, .menu-arrow, .sub-menu { display: none; }
    .menu-link { justify-content: center; padding: 14px 8px; }
    .menu-icon { margin-right: 0; }

    /* 顶栏：字体缩小、边距减少 */
    .top-bar { padding: 0 12px; height: 52px; }
    .breadcrumb-item { font-size: 13px; }
    .top-actions .user-info { gap: 10px; }
    .user-name { font-size: 13px; }

    /* 内容区边距缩小 */
    .content-wrapper { padding: 12px; }

    /* 看板/大屏：单列 */
    .dashboard { grid-template-columns: 1fr; height: auto; }
    .dashboard-panel { max-height: 50vh; }
    #map-container { min-height: 360px; }

    /* 看板图例：768px下缩小内边距和字号 */
    #map-container + div { padding: 6px 10px; font-size: 12px; }
    #map-legend > span { margin-right: 6px !important; }

    /* 表单：单列 */
    .form-row { grid-template-columns: 1fr; gap: 0; }

    /* 统计卡片：2列 */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .stat-card { padding: 14px; gap: 12px; }
    .stat-icon { width: 40px; height: 40px; font-size: 20px; }
    .stat-info .stat-value { font-size: 22px; }

    /* 卡片：内边距缩小 */
    .card-header { padding: 12px 16px; }
    .card-body { padding: 14px; }
    .search-form { padding: 12px 14px; }
    .search-form .form-row { gap: 10px; }

    /* 表格：横向滚动容器 + 最小宽度保证列不挤 */
    .table-wrap, .data-table-wrap, .card-body { overflow-x: auto; }
    .data-table { min-width: 900px; width: max-content; }
    .data-table th, .data-table td { padding: 10px 12px; font-size: 13px; white-space: nowrap; }
    .table-actions { flex-wrap: wrap; gap: 6px; }
    .table-actions .btn { padding: 4px 10px; font-size: 12px; }

    /* 模态框：宽度自适应，左右留2.5vw边距，最大高92vh */
    .modal { width: 95vw; max-width: 95vw; margin: 10px; border-radius: 10px; max-height: 92vh; }
    .modal-header { padding: 12px 16px; }
    .modal-body { padding: 14px 16px; }
    .modal-footer { padding: 10px 16px; }

    /* 工具栏：允许换行 */
    .toolbar { flex-wrap: wrap; gap: 8px; }
    .toolbar-left, .toolbar-right { flex-wrap: wrap; gap: 8px; }

    /* 按钮：高度更紧凑 */
    .btn { padding: 5px 12px; font-size: 13px; }
    .btn-sm { padding: 3px 8px; font-size: 12px; }

    /* 搜索框：最小宽度减小 */
    .search-form input, .search-form select { min-width: 130px; font-size: 13px; padding: 5px 10px; }
    .form-group input, .form-group select, .form-group textarea { font-size: 13px; padding: 7px 10px; }

    /* 大屏地图页：单列 */
    #map-container { height: 60vh; }
}

/* ========== 响应式：手机 ========== */
@media (max-width: 480px) {
    /* 全局：默认13号字 */
    body { font-size: 13px; -webkit-text-size-adjust: 100%; }

    /* 登录盒：全宽90%，padding缩小 */
    .login-box { width: 90%; max-width: 400px; padding: 28px 20px; }
    .login-logo h1 { font-size: 20px; }
    .login-logo .icon { font-size: 40px; }
    .login-form input[type="text"],
    .login-form input[type="password"] { padding: 10px 12px; font-size: 14px; }
    .login-form .btn-primary, .btn-login { padding: 10px; font-size: 15px; }

    /* 侧边栏：更窄（52px），更紧凑图标 */
    .sidebar { width: 52px; }
    .sidebar-header { padding: 12px 4px; }
    .sidebar-header .logo { font-size: 24px; }
    .menu-link { padding: 12px 4px; }
    .menu-icon { font-size: 15px; }

    /* 顶栏：更紧凑，面包屑缩字号 */
    .top-bar { padding: 0 10px; height: 48px; }
    .breadcrumb { gap: 4px; }
    .breadcrumb-item { font-size: 12px; }
    .breadcrumb-sep { font-size: 11px; }
    .user-name { font-size: 12px; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
    .logout-btn { font-size: 12px; }

    /* 内容区：大幅缩边距 */
    .content-wrapper { padding: 8px; }

    /* 统计卡片：两列（紧凑） */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
    .stat-card { padding: 10px; gap: 8px; border-radius: 6px; }
    .stat-icon { width: 36px; height: 36px; font-size: 18px; border-radius: 6px; }
    .stat-info .stat-value { font-size: 18px; }
    .stat-info .stat-label { font-size: 11px; }

    /* 卡片：紧凑布局 */
    .card { border-radius: 6px; }
    .card-header { padding: 10px 12px; }
    .card-header h3 { font-size: 14px; }
    .card-body { padding: 10px 12px; border-radius: 0 0 6px 6px; }

    /* 搜索表单：全宽展开，表单项竖排 */
    .search-form { padding: 10px 12px; border-radius: 6px; margin-bottom: 10px; }
    .search-form .form-row { flex-direction: column; gap: 8px; }
    .search-form .form-item { flex-direction: row; width: 100%; gap: 6px; }
    .search-form .form-item label { min-width: 60px; font-size: 12px; color: #666; }
    .search-form input, .search-form select { min-width: 0; width: 100%; flex: 1; font-size: 13px; padding: 6px 10px; }
    .search-actions { margin-top: 10px; gap: 6px; }
    .search-actions .btn { padding: 6px 12px; font-size: 13px; }

    /* 工具栏：全换行，左右合并 */
    .toolbar { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 10px; }
    .toolbar-left, .toolbar-right { width: 100%; justify-content: space-between; gap: 6px; }
    .toolbar .btn { flex: 1; justify-content: center; }

    /* 表格：更紧凑，强制横滚 */
    .data-table { min-width: 860px; }
    .data-table th, .data-table td { padding: 8px 10px; font-size: 12px; }
    .table-actions .btn { padding: 3px 8px; font-size: 11px; }

    /* 模态框：圆角更小，内边距更紧凑，底部按钮全宽 */
    .modal { width: 96vw; max-width: 96vw; border-radius: 8px; margin: 6px; }
    .modal-header { padding: 10px 12px; }
    .modal-header h3 { font-size: 15px; }
    .modal-body { padding: 12px; font-size: 13px; }
    .modal-footer { padding: 10px 12px; }
    .modal-footer .btn { flex: 1; justify-content: center; }

    /* 表单：内边距紧凑 */
    .form-group { margin-bottom: 12px; }
    .form-group label { margin-bottom: 4px; font-size: 13px; }
    .form-group input, .form-group select, .form-group textarea { font-size: 13px; padding: 7px 10px; }
    .form-row { gap: 0; }

    /* 分页：紧凑 */
    .pagination { padding: 10px 4px; gap: 4px; flex-wrap: wrap; }
    .page-btn { min-width: 30px; height: 30px; font-size: 13px; padding: 0 6px; }

    /* 看板地图：缩小显示区 */
    .dashboard { grid-template-columns: 1fr; gap: 8px; min-height: auto; }
    .dashboard-panel { padding: 10px; max-height: none; min-height: 0; }
    .dashboard-panel h3 { font-size: 13px; margin-bottom: 10px; padding-bottom: 6px; }
    #map-container { min-height: 300px; height: 55vh; }

    /* 看板图例：480px下从右上角移到底部居中，缩小字号，换行显示避免截断 */
    #map-container + div {
        top: auto !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%);
        bottom: 10px;
        padding: 6px 10px !important;
        font-size: 11px !important;
        max-width: calc(100% - 20px);
        box-sizing: border-box;
        width: max-content;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    #map-legend { display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: center; align-items: center; }
    #map-legend > span { margin-right: 0 !important; display: inline-flex; align-items: center; white-space: nowrap; }

    /* Toast：缩小，避免遮挡 */
    .toast { top: 10px; padding: 8px 14px; font-size: 13px; max-width: 92vw; }

    /* 空状态：更紧凑 */
    .empty-state { padding: 30px 14px; }
    .empty-state .icon { font-size: 40px; }

    /* 按钮：统一紧凑 */
    .btn { padding: 6px 12px; font-size: 13px; border-radius: 4px; }
    .btn-lg { padding: 9px 18px; font-size: 14px; }
    .btn-block { width: 100%; }
}

/* ========== 响应式：超小屏（<360px） ========== */
@media (max-width: 360px) {
    .stats-grid { grid-template-columns: 1fr; }
    .stat-card { justify-content: flex-start; }
    .login-box { padding: 22px 16px; }
    .login-logo .icon { font-size: 36px; }
    .login-logo h1 { font-size: 18px; }
}

/* ========== 滚动条 ========== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #bfbfbf; }
::-webkit-scrollbar-track { background: transparent; }

/* ========== 登录页 ========== */
.error-page { text-align: center; padding: 80px 20px; }
.error-page h1 { font-size: 72px; color: #1890ff; margin-bottom: 16px; }
.error-page p { color: #666; margin-bottom: 24px; }

/* ========== 图表 ========== */
.chart-bar { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 10px 0; }
.chart-bar .bar { flex: 1; background: linear-gradient(180deg, #1890ff 0%, #40a9ff 100%); border-radius: 4px 4px 0 0; position: relative; min-height: 4px; }
.chart-bar .bar::after { content: attr(data-value); position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #666; }
.chart-bar .bar-label { text-align: center; margin-top: 4px; font-size: 11px; color: #999; }
.chart-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.chart-row .label { width: 80px; font-size: 12px; color: #666; }
.chart-row .bar-bg { flex: 1; height: 16px; background: #f5f5f5; border-radius: 8px; overflow: hidden; }
.chart-row .bar-fill { height: 100%; background: linear-gradient(90deg, #1890ff, #40a9ff); border-radius: 8px; transition: width 0.6s ease; }
.chart-row .value { width: 40px; text-align: right; font-size: 12px; color: #333; font-weight: 500; }

/* ========== 路口状态字典：颜色 + 图标选择器 ========== */
.palette-swatch { width:22px;height:22px;border-radius:50%;display:inline-block;cursor:pointer;border:2px solid transparent;box-shadow:0 0 0 1px rgba(0,0,0,0.08);transition:transform .12s; }
.palette-swatch:hover { transform:scale(1.12); }
.palette-swatch.active { border-color:#1890ff;box-shadow:0 0 0 2px rgba(24,144,255,0.25); }
.icon-swatch { width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #eee;border-radius:6px;cursor:pointer;font-size:18px;background:#fff;transition:all .12s;user-select:none; }
.icon-swatch:hover { background:#f0f7ff;border-color:#bae0ff;transform:translateY(-1px); }
.icon-swatch.active { background:#e6f4ff;border-color:#1890ff;box-shadow:0 0 0 2px rgba(24,144,255,0.2); }
.icon-row .hint { color:#888;font-size:12px; }

/* ========== H5 自适应补充（v7 新增） ========== */
/* 所有卡片/表格容器默认支持横滚，避免窄屏溢出 */
.card-body, .search-form, .dashboard-panel, .panel, .toolbar, .pagination { -webkit-overflow-scrolling: touch; }
.search-form, .card-body > form, .card-body > .toolbar, .card-body > .table-wrap,
.card-body > .data-table-wrap, .card-body > table { min-width: 0; }
input, select, textarea, button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 4px; }
/* 复选框/单选框恢复原生外观（否则被上一条 appearance:none 隐藏） */
input[type="checkbox"], input[type="radio"] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; width: 16px; height: 16px; cursor: pointer; accent-color: #1890ff; vertical-align: middle; }
button, input[type="button"], input[type="submit"] { touch-action: manipulation; }
/* iOS 输入框背景/圆角重置 */
input[type="text"], input[type="password"], input[type="number"], input[type="search"], input[type="email"],
input[type="tel"], input[type="url"], select, textarea { background-color: #fff; }
select { background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%;
    background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 30px; }

/* ========== 响应式补充：大屏/看板/设备大屏手机端细节 ========== */
@media (max-width: 768px) {
    /* 主布局：侧边栏可滑出(通过.mobile-open类控制) */
    .app-container { position: relative; overflow: hidden; }
    .sidebar { transition: transform .25s ease; z-index: 100; position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); box-shadow: 2px 0 12px rgba(0,0,0,0.15); }
    .app-container.mobile-open .sidebar { transform: translateX(0); }
    .app-container.mobile-open::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 99; }
    .main-content { width: 100%; min-width: 0; }
    /* 顶栏：增加汉堡菜单按钮 */
    .top-bar .hamburger { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #e8e8e8; border-radius: 4px; background: #fff; cursor: pointer; font-size: 18px; color: #666; margin-right: 10px; }
    .top-bar .breadcrumb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sidebar-nav { -webkit-overflow-scrolling: touch; }
    /* 移动端打开侧栏时显示文字（覆盖 768px 默认 display:none） */
    .app-container.mobile-open .sidebar { width: 220px; }
    .app-container.mobile-open .sidebar-header { justify-content: flex-start; padding: 20px; }
    .app-container.mobile-open .sidebar-header .logo-text,
    .app-container.mobile-open .menu-text,
    .app-container.mobile-open .menu-arrow { display: initial; }
    /* 子菜单不强制全部显示，保留 .open 类控制展开/折叠 */
    .app-container.mobile-open .menu-link { justify-content: flex-start; padding: 12px 20px; }
    .app-container.mobile-open .menu-icon { margin-right: 10px; }
    .app-container.mobile-open .sub-menu-item { padding: 10px 20px 10px 50px; }
}
@media (min-width: 769px) {
    .top-bar .hamburger { display: none; }
}

@media (max-width: 480px) {
    /* 卡片头：允许按钮换行 */
    .card-header { flex-wrap: wrap; gap: 8px; }
    .card-header h3 { flex: 1 1 100%; }
    .card-header > div:last-child { width: 100%; display: flex; gap: 6px; flex-wrap: wrap; }
    .card-header > div:last-child .btn { flex: 1; min-width: 44%; justify-content: center; }

    /* 搜索表单单列强制 */
    .search-form .form-item { flex-wrap: wrap; }
    .search-form .form-item label { min-width: 64px; width: 64px; }
    .search-form input, .search-form select { width: 100%; }

    /* 面包屑：隐藏分隔符前项只保留当前 */
    .breadcrumb-item:not(.active) { display: none; }
    .breadcrumb-sep { display: none; }

    /* 统计卡片单列（极窄屏） */
    /* 保持2列，保证信息密度 */

    /* Toast 避免遮挡 */
    .toast { word-break: break-all; white-space: normal; line-height: 1.4; }
}

/* 超小屏：统计卡片单列 */
@media (max-width: 360px) {
    .stats-grid { grid-template-columns: 1fr !important; gap: 8px; }
    .stat-card { padding: 10px 12px; }
    .app-container.mobile-open .sidebar { width: 200px; }
}