/* ============================================================
   现代简约 UI 升级
   Modern Clean Interface - 基于用户提供的设计参考
   ============================================================ */

/* ==================== 核心设计变量 ==================== */
:root {
    --ui-primary: #1890ff;
    --ui-success: #52c41a;
    --ui-warning: #faad14;
    --ui-error: #ff4d4f;
    --ui-radius: 16px;
    --ui-radius-sm: 12px;
    --ui-radius-lg: 20px;
}

/* ==================== 侧边栏升级 ==================== */
body.dark-mode .sidebar {
    background: #141517;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

body.dark-mode .sidebar-header {
    padding: 24px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.dark-mode .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    margin: 0;
}

body.dark-mode .logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}

body.dark-mode .logo-text {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

body.dark-mode .logo-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

body.dark-mode .nav-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

body.dark-mode .nav-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.dark-mode .nav-item {
    margin: 4px 12px;
    border-radius: 10px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.55);
}

body.dark-mode .nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
}

body.dark-mode .nav-item.active {
    background: rgba(24, 144, 255, 0.15);
    color: #1890ff;
}

body.dark-mode .nav-item.active .nav-icon {
    background: rgba(24, 144, 255, 0.2);
}

body.dark-mode .nav-text {
    font-size: 14px;
    font-weight: 500;
}

/* ==================== 仪表盘视图 - 简约卡片 ==================== */
body.dark-mode #dashboardView {
    background: transparent;
}

body.dark-mode .metric-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ui-radius);
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

body.dark-mode .metric-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* 移除所有伪元素效果 */
body.dark-mode .metric-card::before,
body.dark-mode .metric-card::after {
    display: none;
}

/* 图标样式 - 使用emoji风格 */
.metric-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 12px;
    font-size: 28px;
    position: relative;
}

.metric-icon::before {
    display: none;
}

.metric-icon svg {
    display: none;
}

/* 体温 - 红色 */
body.dark-mode .metric-card[data-metric="bodyTemp"] .metric-icon {
    background: linear-gradient(135deg, rgba(255, 77, 79, 0.15) 0%, rgba(255, 77, 79, 0.05) 100%);
    color: #ff6b6b;
}

/* 心率 - 粉色 */
body.dark-mode .metric-card[data-metric="heartRate"] .metric-icon {
    background: linear-gradient(135deg, rgba(240, 98, 146, 0.15) 0%, rgba(240, 98, 146, 0.05) 100%);
    color: #f06292;
}

/* 血氧 - 紫色 */
body.dark-mode .metric-card[data-metric="spo2"] .metric-icon {
    background: linear-gradient(135deg, rgba(171, 71, 188, 0.15) 0%, rgba(171, 71, 188, 0.05) 100%);
    color: #ab47bc;
}

/* 湿度 - 蓝色 */
body.dark-mode .metric-card[data-metric="humidity"] .metric-icon {
    background: linear-gradient(135deg, rgba(66, 165, 245, 0.15) 0%, rgba(66, 165, 245, 0.05) 100%);
    color: #42a5f5;
}

/* 环境温度 - 橙色 */
body.dark-mode .metric-card[data-metric="envTemp"] .metric-icon {
    background: linear-gradient(135deg, rgba(255, 167, 38, 0.15) 0%, rgba(255, 167, 38, 0.05) 100%);
    color: #ffa726;
}

/* 环境湿度 - 绿色 */
body.dark-mode .metric-card[data-metric="envHumidity"] .metric-icon {
    background: linear-gradient(135deg, rgba(102, 187, 106, 0.15) 0%, rgba(102, 187, 106, 0.05) 100%);
    color: #66bb6a;
}

/* 标签 */
.metric-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 8px;
    font-weight: 500;
}

/* 数值 */
.metric-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin: 12px 0;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: none;
}

.metric-value .unit {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 4px;
}

/* 趋势指示器 */
.metric-trend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 8px;
}

.trend-indicator {
    font-size: 8px;
    color: var(--ui-success);
}

/* 状态条 - 简化 */
.metric-status {
    display: none;
}

/* ==================== 设备控制视图 ==================== */
body.dark-mode .control-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ui-radius);
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
}

body.dark-mode .control-card::before,
body.dark-mode .control-card::after {
    display: none;
}

body.dark-mode .control-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

body.dark-mode .control-card.active {
    background: rgba(82, 196, 26, 0.08);
    border-color: rgba(82, 196, 26, 0.3);
}

/* 控制图标容器 */
.control-icon-wrapper {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border-radius: 16px;
    position: relative;
}

.control-icon-wrapper::before,
.control-icon-wrapper::after {
    display: none;
}

.control-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 32px;
}

.control-icon svg {
    display: none;
}

/* LED - 黄色 */
body.dark-mode .control-card[data-device="led"] .control-icon {
    background: linear-gradient(135deg, rgba(255, 214, 102, 0.15) 0%, rgba(255, 214, 102, 0.05) 100%);
    color: #ffd666;
}

/* 风扇 - 蓝色 */
body.dark-mode .control-card[data-device="fan"] .control-icon {
    background: linear-gradient(135deg, rgba(105, 177, 255, 0.15) 0%, rgba(105, 177, 255, 0.05) 100%);
    color: #69b1ff;
}

/* 蜂鸣器 - 粉色 */
body.dark-mode .control-card[data-device="buzzer"] .control-icon {
    background: linear-gradient(135deg, rgba(255, 133, 194, 0.15) 0%, rgba(255, 133, 194, 0.05) 100%);
    color: #ff85c2;
}

/* 继电器 - 绿色 */
body.dark-mode .control-card[data-device="relay1"] .control-icon,
body.dark-mode .control-card[data-device="relay2"] .control-icon {
    background: linear-gradient(135deg, rgba(149, 222, 100, 0.15) 0%, rgba(149, 222, 100, 0.05) 100%);
    color: #95de64;
}

.control-icon svg {
    width: 28px;
    height: 28px;
}

.control-name {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
    text-align: center;
}

.control-status {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    margin-bottom: 16px;
}

/* 开关样式 - 现代圆润 */
.control-switch {
    display: flex;
    justify-content: center;
}

.control-switch input[type="checkbox"] {
    display: none;
}

.switch-slider {
    width: 48px;
    height: 26px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.switch-slider::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.control-switch input[type="checkbox"]:checked + .switch-slider {
    background: var(--ui-primary);
}

.control-switch input[type="checkbox"]:checked + .switch-slider::before {
    transform: translateX(22px);
}

/* 场景按钮 */
body.dark-mode .scene-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ui-radius-sm);
    padding: 16px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

body.dark-mode .scene-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

body.dark-mode .scene-btn:active {
    transform: translateY(0);
}

/* ==================== 位置追踪视图 ==================== */
body.dark-mode .map-bottom-panel {
    background: rgba(26, 29, 36, 0.95);
    backdrop-filter: blur(20px);
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 导航按钮组 - 参考截图样式 */
.nav-mode-group {
    display: flex;
    gap: 12px;
    padding: 16px;
}

.nav-mode-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.nav-mode-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.nav-mode-btn.active {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: #fff;
}

/* ==================== 历史数据视图 ==================== */
body.dark-mode .chart-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ui-radius);
    padding: 20px;
    transition: all 0.3s ease;
}

body.dark-mode .chart-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .chart-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 16px;
}

/* 表格样式 */
body.dark-mode .history-table {
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}

body.dark-mode .history-table th {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    padding: 12px 16px;
}

body.dark-mode .history-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .history-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* ==================== 视频监控视图 ==================== */
body.dark-mode .video-player {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

body.dark-mode .video-controls {
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    gap: 12px;
    justify-content: center;
}

body.dark-mode .video-controls button {
    padding: 10px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

body.dark-mode .video-controls button:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

/* ==================== 设置视图 ==================== */
body.dark-mode .settings-group {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ui-radius);
    padding: 20px;
    margin-bottom: 20px;
}

body.dark-mode .form-group input,
body.dark-mode .threshold-item input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    transition: all 0.3s ease;
}

body.dark-mode .form-group input:focus,
body.dark-mode .threshold-item input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--ui-primary);
    outline: none;
}

/* ==================== 按钮通用样式 ==================== */
body.dark-mode .btn-primary {
    background: var(--ui-primary);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

body.dark-mode .btn-primary:hover {
    background: #40a9ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

body.dark-mode .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

body.dark-mode .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

/* ==================== 移除所有动画效果 ==================== */
@keyframes scan-line,
@keyframes pulse-dot,
@keyframes warning-pulse,
@keyframes danger-pulse,
@keyframes pulse-ring {
    from, to { opacity: 0; transform: scale(0); }
}