/* 吊桶 检测系统样式 */

body {
    background: linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #0f1419 100%);
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    overflow-x: hidden;
    color: #e8eaed;
}

/* Global Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 监控大屏专用样式 */
.dashboard-monitor {
    background: transparent;
    color: #e8eaed;
}

/* 仪表板头部样式 */
.dashboard-header {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-title {
    color: #00d4ff;
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.dashboard-subtitle {
    color: #a0a6b0;
    font-size: 0.9rem;
    margin: 5px 0 0 0;
}

.dashboard-time {
    text-align: right;
}

.current-time {
    font-size: 2.5rem;
    font-weight: 700;
    color: #00ff88;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

.current-date {
    font-size: 1rem;
    color: #a0a6b0;
    margin-top: 5px;
}

/* 监控卡片样式 */
.monitor-card {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--card-radius);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    margin-bottom: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.monitor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 212, 255, 0.3);
}

/* 这些样式已移动到后面的新布局中 */

.monitor-header {
    background: rgba(255, 255, 255, 0.05);
    padding: 0 8px;
    height: var(--monitor-header-h, 30px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.monitor-title {
    color: #00d4ff;
    font-size: 0.78rem;
    line-height: 1.1;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

.monitor-header i {
    font-size: 0.85rem;
    margin-right: 4px;
}

.monitor-header .icon {
    width: 0.9rem;
    height: 0.9rem;
}

.monitor-body {
    padding: 8px;
}

/* 监控按钮样式 */
.btn-monitor {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: #00d4ff;
    padding: 1px 5px;
    font-size: 0.8rem;
    line-height: 1.1;
    border-radius: 8px;
    margin-left: 4px;
    transition: all 0.3s ease;
}

.monitor-header .monitor-controls {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 6px;
}

.monitor-header .monitor-controls .form-switch {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding-left: 1.9em;
    min-height: auto;
}

.monitor-header .monitor-controls .form-switch .form-check-input {
    margin-left: -1.9em;
    margin-top: 0;
    cursor: pointer;
    width: 1.8em;
    height: 1em;
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.monitor-header .monitor-controls .form-switch .form-check-input:checked {
    background-color: #00d4ff;
    border-color: #00d4ff;
}

.monitor-header .monitor-controls .form-switch .form-check-label {
    font-size: 0.75rem;
    color: #a0aec0;
    cursor: pointer;
    user-select: none;
    margin-left: 3px;
    line-height: 1;
}

/* 标题与状态指示器并排显示，确保在标题框内 */
.monitor-title-group {
    display: flex;
    align-items: center;
    gap: 96px;
    flex: 1 1 auto;
}
.monitor-title-group .status-indicator {
    position: relative;
    margin-left: 6px;
}

/* 标题右侧圆点位置与内边距 */
.monitor-header .header-dot {
    position: absolute;
    right: var(--header-dot-gap-right, 8px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.monitor-header .monitor-tabs .nav-link {
    padding: 3px 6px;
    font-size: 0.8rem;
    margin-right: 4px;
    line-height: 1.1;
}

.btn-monitor:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: #00d4ff;
    color: #00d4ff;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

/* 状态指示器 */
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    box-shadow: 0 0 10px currentColor;
    animation: pulse 2s infinite;
}

.status-indicator.online {
    background: #00ff88;
    box-shadow: 0 0 10px #00ff88;
}

.status-indicator.warning {
    background: #ffaa00;
    box-shadow: 0 0 10px #ffaa00;
}

.status-indicator.error {
    background: #ff4444;
    box-shadow: 0 0 10px #ff4444;
}

.status-indicator.offline {
    background: #ffaa00;
    box-shadow: 0 0 10px #ffaa00;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* 角度监控样式 */
.angle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.angle-item {
    text-align: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.angle-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.3);
}

.angle-label {
    color: #a0a6b0;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.angle-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 5px;
}

.angle-value.rope-overall-value {
    align-items: center;
}

.angle-value .value {
    font-size: 2rem;
    font-weight: 700;
    color: #00ff88;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

.angle-value.rope-overall-value .value {
    font-size: 2.6rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8rem;
}

.angle-value.rope-overall-value .value i {
    font-size: 2.6rem;
}

.rope-icon-ok {
    color: #00ff88;
    text-shadow: 0 0 16px rgba(0, 255, 136, 0.45);
}

.rope-icon-bad {
    color: #ff4444;
    text-shadow: 0 0 16px rgba(255, 68, 68, 0.45);
}

.rope-icon-unknown {
    color: #a0a6b0;
    text-shadow: 0 0 10px rgba(160, 166, 176, 0.25);
}

.rope-icon-unknown i {
    animation: ropeSpin 1.2s linear infinite;
}

@keyframes ropeSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.angle-value .unit {
    font-size: 1.2rem;
    color: #a0a6b0;
    margin-left: 5px;
}

.angle-status {
    font-size: 0.8rem;
    color: #00ff88;
    padding: 4px 8px;
    background: rgba(0, 255, 136, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(0, 255, 136, 0.3);
}

 .angle-status.status-offline {
     color: #ffaa00;
     background: rgba(255, 170, 0, 0.12);
     border: 1px solid rgba(255, 170, 0, 0.35);
 }

/* ======== 轨道巡检概览（轨道监控卡片） ======== */
.rail-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.rail-insp-mini-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    transition: all 0.3s ease;
}
.rail-insp-mini-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.3);
}

.rail-insp-mini-header {
    font-size: 0.78rem;
    color: #a0c4e8;
    margin-bottom: 6px;
}

.rail-code-big {
    font-size: 2rem;
    font-weight: 800;
    color: #00d4ff;
    text-shadow: 0 0 18px rgba(0, 212, 255, 0.4);
    line-height: 1.15;
    letter-spacing: 1px;
    min-height: 2.4rem;
}

.rail-insp-meta {
    margin: 4px 0;
}
.rail-insp-time {
    font-size: 0.72rem;
    color: #8a9bb0;
}

.rail-insp-badge-wrap {
    margin-top: 4px;
}
.rail-insp-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
}
.rail-insp-badge.badge-waiting {
    color: #a0a6b0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.rail-insp-badge.badge-ok {
    color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
}
.rail-insp-badge.badge-fault {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.12);
    border: 1px solid rgba(255, 68, 68, 0.35);
    animation: pulse-fault 2s infinite;
}
@keyframes pulse-fault {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); }
    50% { box-shadow: 0 0 8px 2px rgba(255, 68, 68, 0.3); }
}

/* 轨道缺失小卡片 */
.rail-missing-mini-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    transition: all 0.3s ease;
}
.rail-missing-mini-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.3);
}
.rail-missing-mini-card.missing-active {
    border-color: rgba(255, 68, 68, 0.5);
    background: rgba(255, 68, 68, 0.08);
}

.rail-missing-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    color: #00ff88;
    font-size: 1.2rem;
    margin-bottom: 6px;
    transition: all 0.3s ease;
}
.rail-missing-icon-wrap.icon-missing {
    background: rgba(255, 68, 68, 0.1);
    border-color: rgba(255, 68, 68, 0.35);
    color: #ff4444;
}

.rail-missing-label {
    font-size: 0.78rem;
    color: #a0c4e8;
    margin-bottom: 2px;
}
.rail-missing-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #00ff88;
}
.rail-missing-value.status-missing {
    color: #ff4444;
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.3);
}

/* ======== 接头状态网格 ======== */
.joint-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    height: 100%;
    align-content: stretch;
}

.joint-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: all 0.3s ease;
}
.joint-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.3);
}

.joint-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.25);
    color: #00d4ff;
    margin-right: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
}
.joint-icon.fault-active {
    background: rgba(255, 68, 68, 0.1);
    border-color: rgba(255, 68, 68, 0.3);
    color: #ff4444;
}

.joint-info {
    flex: 1;
    min-width: 0;
}

.joint-label {
    color: #a0a6b0;
    font-size: 0.78rem;
    margin-bottom: 2px;
}

.joint-val-row {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.joint-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: #00ff88;
    font-family: 'Consolas', 'Monaco', monospace;
    text-shadow: 0 0 12px rgba(0, 255, 136, 0.35);
    line-height: 1.2;
}

.joint-unit {
    font-size: 0.78rem;
    color: #a0a6b0;
}

.joint-status {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 1px;
}
.joint-status.status-normal {
    color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.25);
}
.joint-status.status-fault {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
}
.joint-status.status-offline {
    color: #ffaa00;
    background: rgba(255, 170, 0, 0.1);
    border: 1px solid rgba(255, 170, 0, 0.25);
}

/* 设备状态网格 - 自适应填充高度 */
.device-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr); /* 3行均分高度 */
    gap: 4px;
    height: 100%;
    align-content: stretch;
}

.device-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.device-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateY(-1px);
}

.device-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    margin-bottom: 4px;
    color: #00d4ff;
    font-size: 0.95rem;
}

.device-icon.emergency {
    background: rgba(255, 68, 68, 0.1);
    border-color: rgba(255, 68, 68, 0.3);
    color: #ff4444;
}

.device-info {
    flex: 0 0 auto;
    text-align: center;
}

.device-name {
    color: #a0a6b0;
    font-size: 0.72rem;
    line-height: 1.2;
    margin-bottom: 2px;
}

.device-value {
    color: #e8eaed;
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.2;
}

.device-value.status-on {
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.35);
}

 .device-value.status-offline {
     color: #ffaa00;
     text-shadow: 0 0 10px rgba(255, 170, 0, 0.25);
 }

 .video-status .status-text.offline-text {
     color: #ffaa00;
 }

.device-value.status-error {
    color: #ff4444;
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.35);
}

/* 维保状态：橙色 */
.device-value.status-maintenance {
    color: #ffaa00;
    text-shadow: 0 0 10px rgba(255, 170, 0, 0.35);
}

/* 尾绳总体状态-维保图标 */
.rope-icon-maintenance {
    color: #ffaa00;
    text-shadow: 0 0 16px rgba(255, 170, 0, 0.45);
}

/* 尾绳总体状态文字-维保 */
.angle-status.status-maintenance {
    color: #ffaa00;
    background: rgba(255, 170, 0, 0.12);
    border: 1px solid rgba(255, 170, 0, 0.35);
}

.device-value.status-error i {
    font-size: 1.05rem;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    color: #ff4444;
    text-shadow: 0 0 12px rgba(255, 68, 68, 0.45);
}

/* 视频容器增强 - 最大化填充 */
.video-container {
    position: relative;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 移除固定宽高比，让容器自适应 */
}

.video-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持完整画面和原比例 */
    display: block;
}

/* 视频流特殊处理 - 保持比例 */
#video-stream {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* 保持完整画面 */
    background: #000;
}

.video-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
}

.video-status {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.status-text {
    color: #00ff88;
    font-size: 0.9rem;
    font-weight: 600;
}

/* 最近图像样式 - 2列3行填满容器高度 */
.recent-images {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 固定2列 */
    grid-template-rows: repeat(3, 1fr) !important; /* 固定3行，均分高度填满容器 */
    gap: 8px !important;
    width: 100% !important;
    height: 100% !important; /* 填满父容器高度 */
    overflow: hidden !important;
    padding: 6px !important;
}

/* 只显示前6张图片（2列×3行） */
.recent-images .image-item:nth-child(n+7) {
    display: none !important;
}

.recent-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    min-height: 150px;
}

.recent-images .image-item,
.recent-images-grid .image-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important; /* 填满网格单元 */
    min-height: 0 !important;
}

.recent-images .image-item img {
    width: 100% !important;
    height: 100% !important; /* 填满容器 */
    object-fit: cover !important; /* 裁剪填满 */
    background: #000 !important;
    display: block !important;
}

.recent-images .image-info {
    padding: 12px !important;
    color: #e8eaed !important;
}

.recent-images .image-time {
    font-size: 0.8rem !important;
    color: #a0a6b0 !important;
    margin-bottom: 4px !important;
}

.recent-images .image-type {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #00d4ff !important;
}

.recent-images .image-status {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    backdrop-filter: blur(10px) !important;
}

.recent-images-grid .image-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.recent-images-grid .image-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    background: #000;
}

.recent-images-grid .image-info {
    padding: 12px;
    color: #e8eaed;
}

.recent-images-grid .image-time {
    font-size: 0.8rem;
    color: #a0a6b0;
    margin-bottom: 4px;
}

.recent-images-grid .image-type {
    font-size: 0.9rem;
    font-weight: 600;
    color: #00d4ff;
}

.recent-images-grid .image-status {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.recent-images-grid .image-status.normal {
    background: rgba(0, 255, 136, 0.8);
    color: #000;
}

.recent-images-grid .image-status.warning {
    background: rgba(255, 170, 0, 0.8);
    color: #000;
}

.recent-images-grid .image-status.error {
    background: rgba(255, 68, 68, 0.8);
    color: #fff;
}

/* 加载占位符样式 */
.loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    color: #a0a6b0;
    font-size: 1.1rem;
    grid-column: 1 / -1;
}

.loading-placeholder i {
    font-size: 1.5rem;
    color: #00d4ff;
}

/* 响应式调整 */
@media (max-width: 768px) {
    /* === 移动端紧凑布局 === */
    /* 减少页面内边距 */
    .page-content {
        padding: 0 10px 10px !important;
    }
    
    #dashboard-page.page-content {
        padding: 0 8px 8px !important;
    }
    
    /* 容器留出合适边距 */
    #dashboard-page > .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* === 基础布局重置 === */
    .recent-images-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }
    
    /* 最近图片 - 移动端显示2列多行 */
    .recent-images {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: auto !important;
        gap: 8px !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    .recent-images .image-item {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
    }
    
    .recent-images .image-item img {
        width: 100% !important;
        height: auto !important; /* 保持图片原始比例 */
        object-fit: contain !important;
    }
    
    .angle-grid {
        grid-template-columns: 1fr;
        gap: 2px;
        min-height: 100px;
    }
    
    .device-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    
    .angle-item {
        min-height: 80px;
        padding: 8px;
    }
    
    .dashboard-title {
        font-size: 1.3rem;
    }
    
    .current-time {
        font-size: 1.8rem;
    }
    
    /* === Dashboard核心布局修复 === */
    /* 重置页面容器 - 使用normal flow */
    #dashboard-page {
        display: block !important;
        position: static !important;
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
    }
    
    #dashboard-page > .container-fluid {
        display: block !important;
        position: static !important;
        height: auto !important;
    }
    
    /* 重置普通row - 垂直堆叠（不影响dashboard-main） */
    #dashboard-page .row:not(.dashboard-main),
    #dashboard-page .row.mt-4 {
        display: block !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible !important;
    }

    /* 保持dashboard-main为三列布局 */
    #dashboard-page .dashboard-main {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    
    /* 重置所有column - 100%宽度 */
    #dashboard-page .col-lg-8,
    #dashboard-page .col-lg-4,
    #dashboard-page .col-12 {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        flex: none !important;
        margin-bottom: 10px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 强制dashboard-main内三列在移动端仍保持25%/50%/25% */
    #dashboard-page .dashboard-main .col-3,
    #dashboard-page .dashboard-main .col-md-3,
    #dashboard-page .dashboard-main .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
        padding-left: calc(var(--bs-gutter-x, 8px) / 2) !important;
        padding-right: calc(var(--bs-gutter-x, 8px) / 2) !important;
        margin-bottom: 0 !important;
    }
    #dashboard-page .dashboard-main .col-6,
    #dashboard-page .dashboard-main .col-md-6,
    #dashboard-page .dashboard-main .col-lg-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-left: calc(var(--bs-gutter-x, 8px) / 2) !important;
        padding-right: calc(var(--bs-gutter-x, 8px) / 2) !important;
        margin-bottom: 0 !important;
    }
    
    /* === 卡片样式重置 === */
    /* 移除所有会创建层叠上下文的属性 */
    #dashboard-page .monitor-card,
    #dashboard-page .monitor-card:hover,
    #dashboard-page .monitor-card:active,
    #dashboard-page .monitor-card:focus {
        position: static !important;
        display: block !important;
        transform: none !important;
        backdrop-filter: none !important;
        filter: none !important;
        will-change: auto !important;
        isolation: auto !important;
        contain: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
        margin-bottom: 10px !important;
        border-radius: 12px !important;
    }
    
    #dashboard-page .monitor-header {
        position: relative !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        transform: none !important;
        backdrop-filter: none !important;
        padding: 4px 8px !important;
    }
    
    #dashboard-page .monitor-body {
        position: static !important;
        display: block !important;
        transform: none !important;
        backdrop-filter: none !important;
        padding: 12px !important;
    }
    
    /* === 特定卡片修复 === */
    .video-monitor,
    .angle-monitor,
    .device-monitor,
    .chart-monitor,
    .dashboard-bottom-card {
        position: static !important;
        display: block !important;
        height: auto !important;
        min-height: auto !important;
        margin-bottom: 10px !important;
    }
    
    .chart-monitor .chart-monitor-body {
        min-height: 120px !important;
        padding: 6px !important;
    }
    
    .chart-canvas-wrapper {
        min-height: 50px !important;
        height: 50px !important;
    }
    
    .video-monitor .monitor-body {
        min-height: 180px !important;
        padding: 8px !important;
    }
    
    .angle-monitor .monitor-body,
    .device-monitor .monitor-body {
        min-height: auto !important;
        padding: 10px !important;
    }
    
    /* 减少设备项间距 */
    .device-item {
        padding: 10px 8px !important;
        min-height: 50px !important;
    }
    
    /* === Tabs修复 === */
    #dashboard-page .nav-tabs,
    #dashboard-page .monitor-tabs,
    #dashboard-page ul[role="tablist"] {
        position: static !important;
        display: flex !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #dashboard-page .nav-tabs .nav-link,
    #dashboard-page .monitor-tabs .nav-link {
        padding: 6px 10px !important;
        font-size: 0.9rem !important;
        margin-right: 6px !important;
    }
    
    #dashboard-page .tab-content,
    #dashboard-page .tab-pane {
        position: static !important;
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* 确保图片容器可见 */
    #dashboard-page .recent-images {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* 确保底部卡片body可见 */
    #dashboard-page .dashboard-bottom-card {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    #dashboard-page .dashboard-bottom-card .monitor-body {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
    }
    
    /* 强制tab-pane显示完整内容 */
    #dashboard-page #recent-images-content {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* 按钮紧凑 */
    #dashboard-page .btn-monitor {
        padding: 6px 10px !important;
        font-size: 0.9rem !important;
    }
    
    #dashboard-page .monitor-title {
        font-size: 1rem !important;
        margin: 0 !important;
    }
    
    /* === 全局重置 === */
    /* 禁止所有可能导致层叠的属性 */
    #dashboard-page * {
        will-change: auto !important;
        float: none !important;
    }
    
    /* === 例外：保留必要的定位 === */
    #dashboard-page .video-overlay,
    #dashboard-page .image-status,
    #dashboard-page .img-time,
    #dashboard-page .img-status,
    #dashboard-page .status-indicator,
    #dashboard-page .recent-images .image-item .img-time,
    #dashboard-page .recent-images .image-item .img-status {
        position: absolute !important;
    }
}

/* 大屏幕和超大屏幕 - 视频最大化填充，不设置min-height限制 */

/* Default navbar height variable (updated dynamically via JS) */
:root {
    --navbar-h: 56px;
    --monitor-header-h: 30px;
    --header-dot-gap-right: 8px;
    --card-radius: 6px;
    --dashboard-card-gap: 6px;
    --dashboard-gap: 8px;
}

/* Ensure root elements occupy full height */
html, body {
    height: 100%;
}

/* Final overrides: recent-images 2列3行网格布局 */
@media (min-width: 769px) {
    .recent-images {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2列 */
        grid-template-rows: repeat(3, 1fr) !important; /* 3行，均分高度 */
        gap: 8px !important;
        width: 100% !important;
        height: 100% !important; /* 填满父容器 */
        overflow: hidden !important;
        align-content: stretch !important;
    }
    .recent-images .image-item {
        width: 100% !important;
        height: 100% !important; /* 填满网格单元 */
        min-height: 0 !important;
    }
    .recent-images .image-item img {
        width: 100% !important;
        height: 100% !important; /* 填满容器 */
        object-fit: cover !important; /* 裁剪填满 */
    }
    
    /* 只显示前6张图片（2列×3行） */
    .recent-images .image-item:nth-child(n+7) {
        display: none !important;
    }
}

/* Dashboard: prevent horizontal overflow in the data overview card */
#dashboard-tabs-content,
#dashboard-tabs-content .tab-pane,
#dashboard-page .card-body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Desktop & tablet adjustments */
@media (min-width: 769px) {
    #content {
        margin-left: 250px; /* when sidebar visible */
        width: calc(100% - 250px) !important; /* shrink content width so right side stays visible */
        box-sizing: border-box;
    }
    #content.active {
        margin-left: 0; /* when sidebar collapsed */
        width: 100% !important;
    }
    /* Reduce left padding on desktop to bring content closer to the edge */
    .page-content {
        padding-left: 8px;
        padding-right: 12px;
    }
}

/* Sidebar header close button (mobile only) */
.sidebar-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    box-shadow: none;
}

/* Overlay for mobile sidebar */
#sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1030; /* just under sidebar */
    display: none;
}

#sidebar-overlay.active {
    display: block;
}

/* 布局样式 */
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
    min-height: 100vh;
}

/* 侧边栏样式 */
#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: rgba(15, 20, 25, 0.95);
    color: #e8eaed;
    transition: all 0.3s;
    height: 100vh;
    position: fixed;
    z-index: 1040; /* above content, below modal (Bootstrap modal is 1055+) */
    box-shadow: 3px 0 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: rgba(0, 212, 255, 0.1);
    text-align: center;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}

#sidebar .sidebar-header h3 {
    color: #00d4ff;
    font-size: 1.4rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #4b545c;
    margin: 0;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
    margin: 0;
}

#sidebar ul li {
    margin: 5px 0;
}

#sidebar ul li a {
    padding: 12px 20px;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    color: #e8eaed;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 0 10px;
}

#sidebar ul li a:hover {
    color: #00d4ff;
    background: rgba(0, 212, 255, 0.1);
    transform: translateX(5px);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

#sidebar ul li.active > a {
    color: #00d4ff;
    background: rgba(0, 212, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
    border: 1px solid rgba(0, 212, 255, 0.5);
}

#sidebar ul li a i {
    margin-right: 10px;
    font-size: 1.2em;
    width: 20px;
    text-align: center;
}

#sidebar ul li a .icon {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

#sidebar .sidebar-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
    background: #212529;
    border-top: 1px solid #4b545c;
    text-align: center;
}

#sidebar .sidebar-footer #system-status {
    display: flex;
    align-items: center;
    justify-content: center;
}

#sidebar .sidebar-footer #system-status i {
    margin-right: 8px;
}

/* 内容区域样式 */
#content {
    width: 100%;
    padding: 0;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
    margin-left: 250px;
    background: transparent;
}
@supports (height: 100dvh) {
    #content {
        height: 100dvh;
        max-height: 100dvh;
    }
}

#content.active {
    margin-left: 0;
}

/* 导航栏样式 */
.navbar {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    padding: 0 12px;
    box-sizing: border-box;
    height: var(--navbar-h, 56px);
    min-height: var(--navbar-h, 56px);
    flex: 0 0 auto;
    background: rgba(15, 20, 25, 0.95) !important;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 强制覆盖Bootstrap的导航栏样式 */
.navbar-light {
    background-color: rgba(15, 20, 25, 0.95) !important;
}

.bg-light {
    background-color: rgba(15, 20, 25, 0.95) !important;
}

/* 修复卡片标题文字颜色，确保在深色背景上可读 */
.card-header.bg-light,
.card-header.bg-light h6,
.card-header.bg-light h5,
.card-header.bg-light h4 {
    color: #e8eaed !important;
}

.navbar-brand i {
    margin-right: 8px;
}

.navbar-brand {
    color: #00d4ff !important;
}

.navbar .badge {
    background-color: #00ff88 !important;
}

.navbar .text-muted {
    color: #a0a6b0 !important;
}

/* 导航栏按钮样式 */
.navbar .btn-primary {
    background: rgba(0, 212, 255, 0.2);
    border: 1px solid rgba(0, 212, 255, 0.5);
    color: #00d4ff;
}

.navbar .btn-primary:hover {
    background: rgba(0, 212, 255, 0.3);
    border-color: #00d4ff;
    color: #00d4ff;
}

/* 导航栏时间显示 */
.navbar-time {
    text-align: right;
}

.current-time-small {
    font-size: 1.2rem;
    font-weight: 600;
    color: #00ff88;
    font-family: 'Courier New', monospace;
    line-height: 1;
}

.current-date-small {
    font-size: 0.75rem;
    color: #a0a6b0;
    line-height: 1;
}

/* 监控选项卡样式 */
.monitor-tabs {
    border: none;
    margin: 0;
}

.monitor-tabs .nav-link {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a0a6b0;
    padding: 8px 16px;
    margin-right: 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.monitor-tabs .nav-link:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.3);
    color: #00d4ff;
}

.monitor-tabs .nav-link.active {
    background: rgba(0, 212, 255, 0.2);
    border-color: rgba(0, 212, 255, 0.5);
    color: #00d4ff;
}

/* 统计卡片样式 */
.stats-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--card-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.stats-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.3);
}

.stats-header {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-header h6 {
    color: #00d4ff;
    margin: 0;
    font-weight: 600;
}

.stats-body {
    padding: 16px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 页面内容样式 */
.page-content {
    padding: 4px 12px; /* reduce padding */
    animation: fadeIn 0.3s ease-in-out;
    box-sizing: border-box;
}

/* Dashboard page: flex fill and no extra padding */
#dashboard-page.page-content {
    padding: 4px 12px 4px 12px !important;
    margin: 0 !important;
}

/* 主要监控区域 - 必须填充整个容器高度 */
.dashboard-main {
    flex: 1 1 0 !important;
    height: 100% !important;
    overflow: hidden;
    min-height: 0;
    --bs-gutter-x: 6px;
    --bs-gutter-y: 0;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

/* 使用Bootstrap gutter统一间距，避免卡片自身margin叠加 */
.dashboard-main [class*="col-"] > .monitor-card {
    margin-bottom: 0;
}

/* 左右两侧等高设置 - 确保填充整个高度 */
.dashboard-main .col-lg-8,
.dashboard-main .col-lg-4,
.dashboard-main .col-lg-9,
.dashboard-main .col-lg-6,
.dashboard-main .col-lg-3,
.dashboard-main .col-md-6,
.dashboard-main .col-md-3 {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* 中间列（视频区域）必须填充整个高度 */
.dashboard-main .col-6 {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

/* 视频监控卡片高度优化 - 必须填充整个父容器 */
.video-monitor {
    flex: 1 1 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.video-monitor .monitor-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    padding: 4px !important;
    overflow: hidden !important;
}

/* 确保视频容器在monitor-body中最大化填充 */
.video-monitor .monitor-body .video-container {
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
}

/* 右侧参数监控区域优化 */
.dashboard-main .col-lg-4,
.dashboard-main .col-lg-3,
.dashboard-main .col-md-3 {
    gap: var(--dashboard-card-gap);
}

/* 底部数据概览区域确保可见 */
.dashboard-bottom-card {
    flex: 1 1 auto;
    margin-bottom: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 左侧第一个卡片（角度监控） */
.dashboard-main .col-3:first-child .angle-monitor {
    flex: 0 0 auto;
    margin-bottom: var(--dashboard-card-gap) !important;
    height: auto;
}

.angle-monitor .monitor-body {
    padding: 8px 12px !important;
}

/* 镜头水雾水平提示卡 */
.lens-fog-alert-card {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 76px;
    margin-bottom: var(--dashboard-card-gap) !important;
    padding: 10px 12px;
    border: 1px solid rgba(0, 255, 136, 0.28);
    border-radius: var(--card-radius);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.11), rgba(0, 212, 255, 0.06));
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.lens-fog-alert-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #00ff88;
    background: rgba(0, 255, 136, 0.13);
    font-size: 1.15rem;
}

.lens-fog-alert-content {
    flex: 1 1 auto;
    min-width: 0;
}

.lens-fog-alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.lens-fog-alert-title {
    color: #e8eaed;
    font-size: 0.84rem;
    font-weight: 600;
}

.lens-fog-alert-value {
    color: #00ff88;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.lens-fog-alert-track {
    height: 5px;
    margin: 6px 0;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
}

.lens-fog-alert-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #00ff88;
    transition: width 0.25s ease, background 0.25s ease;
}

.lens-fog-alert-message {
    overflow: hidden;
    color: #a0a6b0;
    font-size: 0.72rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lens-fog-alert-card.warning {
    border-color: rgba(255, 170, 0, 0.45);
    background: linear-gradient(135deg, rgba(255, 170, 0, 0.15), rgba(255, 204, 0, 0.06));
}

.lens-fog-alert-card.warning .lens-fog-alert-icon,
.lens-fog-alert-card.warning .lens-fog-alert-value {
    color: #ffaa00;
}

.lens-fog-alert-card.warning .lens-fog-alert-track span {
    background: #ffaa00;
}

.lens-fog-alert-card.danger {
    border-color: rgba(255, 68, 68, 0.75);
    background: linear-gradient(135deg, rgba(255, 68, 68, 0.24), rgba(180, 20, 20, 0.10));
    box-shadow: 0 0 18px rgba(255, 68, 68, 0.18);
}

.lens-fog-alert-card.danger .lens-fog-alert-icon,
.lens-fog-alert-card.danger .lens-fog-alert-value,
.lens-fog-alert-card.danger .lens-fog-alert-message {
    color: #ff6666;
}

.lens-fog-alert-card.danger .lens-fog-alert-track span {
    background: #ff4444;
}

.lens-fog-alert-card.disabled {
    border-color: rgba(160, 166, 176, 0.3);
    background: rgba(160, 166, 176, 0.08);
}

.lens-fog-alert-card.disabled .lens-fog-alert-icon,
.lens-fog-alert-card.disabled .lens-fog-alert-value {
    color: #a0a6b0;
}

/* 左侧第二个卡片（设备状态）- 填充剩余高度 */
.device-monitor {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    margin-bottom: var(--dashboard-card-gap) !important;
}

.device-monitor .monitor-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding: 8px;
    display: flex;
    flex-direction: column;
}

.device-monitor .monitor-body .device-grid {
    flex: 1 1 0;
    min-height: 0;
    gap: 8px;
}

/* 设备状态卡片采用横向信息布局，避免图标、文字和状态被纵向拉开 */
.dashboard-main .device-monitor .device-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
}

.dashboard-main .device-monitor .device-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    margin: 0;
    border-radius: 9px;
    font-size: 1.28rem;
}

.dashboard-main .device-monitor .device-info {
    min-width: 0;
    text-align: left;
}

.dashboard-main .device-monitor .device-name {
    font-size: 1.08rem;
    line-height: 1.3;
    margin-bottom: 6px;
    white-space: nowrap;
}

.dashboard-main .device-monitor .device-value {
    font-size: 1.3rem;
    line-height: 1.25;
}

/* 左侧第三个卡片（数据曲线）- 填充剩余空间 */
.chart-monitor {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.chart-monitor .chart-monitor-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chart-wrapper {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chart-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    flex: 0 0 auto;
}

.chart-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chart-legend-tread {
    background: #00d4ff;
    box-shadow: 0 0 6px rgba(0, 212, 255, 0.5);
}

.chart-legend-horizontal {
    background: #00ff88;
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.5);
}

.chart-legend-text {
    font-size: 0.72rem;
    color: #a0a6b0;
    white-space: nowrap;
}

.chart-current-value {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: #e8eaed;
    min-width: 50px;
    text-align: right;
}

.chart-canvas-wrapper {
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.chart-canvas-wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 右侧列的卡片（最近图像）- 填充整个高度 */
.dashboard-main .col-3:last-child .angle-monitor {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    margin-bottom: 0 !important;
}

.dashboard-main .col-3:last-child .angle-monitor .monitor-body {
    flex: 1 1 0;
    overflow-y: auto; /* 允许垂直滚动显示多行 */
    overflow-x: hidden;
    min-height: 0;
    padding: 4px;
    display: flex;
    flex-direction: column;
}

/* 最近图像容器 - 中间层高度传递 */
.dashboard-main .col-3:last-child .monitor-body .tab-content {
    flex: 1 1 0;
    min-height: 0;
    height: 100%; /* 填满父容器 */
    display: flex;
    flex-direction: column;
}

.dashboard-main .col-3:last-child .monitor-body .tab-pane {
    flex: 1 1 0;
    min-height: 0;
    height: 100%; /* 填满父容器 */
    display: flex;
    flex-direction: column;
}

.dashboard-main .col-3:last-child .monitor-body .recent-images {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 固定2列 */
    grid-template-rows: repeat(3, 1fr) !important; /* 固定3行，均分高度填满 */
    gap: 6px !important;
    overflow: hidden !important;
    align-content: stretch !important;
    padding: 4px !important;
    height: 100% !important; /* 填满父容器 */
}

/* 图片项填满网格单元 */
.dashboard-main .col-3:last-child .monitor-body .recent-images .image-item {
    height: 100% !important;
    min-height: 0 !important;
}

.dashboard-main .col-3:last-child .monitor-body .recent-images .image-item img {
    width: 100% !important;
    height: 100% !important; /* 填满容器 */
    object-fit: cover !important; /* 裁剪填满 */
}

/* 只显示前6张图片 */
.dashboard-main .col-3:last-child .monitor-body .recent-images .image-item:nth-child(n+7) {
    display: none !important;
}

/* 隐藏滚动条但保持滚动功能 */
.dashboard-main .col-3:last-child .monitor-body .recent-images {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}
.dashboard-main .col-3:last-child .monitor-body .recent-images::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari/Opera */
}

/* 样式已在上方统一定义 */

/* Ensure dashboard page fills remaining height after navbar */
#dashboard-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 4px 12px 4px 12px !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Ensure inner fluid container fills the page height for consistent stretching */
#dashboard-page > .container-fluid {
    flex: 1 1 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

/* dashboard-main必须填充整个container-fluid高度 */
#dashboard-page > .container-fluid > .dashboard-main {
    flex: 1 1 0 !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* Top region uses remaining height */
#dashboard-page > .container-fluid > .dashboard-equal {
    flex: 1 1 auto;
    min-height: 0;
}

/* Bottom card keeps natural height without extra margins */
#dashboard-page > .container-fluid > .dashboard-bottom-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
}
#dashboard-page > .container-fluid > .dashboard-bottom-card .card-body {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
}

/* Let the video container grow/shrink to fit available height in the top card */
.dashboard-equal .col-md-8 > .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.dashboard-equal .col-md-8 > .card .card-header {
    flex: 0 0 auto;
}
.dashboard-equal .col-md-8 > .card .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}
.dashboard-equal .video-container {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
}
.dashboard-equal .video-container img#video-stream {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持完整画面 */
}

/* Tighten first card spacing under navbar */
.page-content .card:first-child {
    margin-top: 6px;
}

/* 页面标题样式 */
.page-title {
    display: none !important;
}

/* 添加淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 响应式调整 */
@media (max-width: 768px) {
    #content {
        margin-left: 0;
    }
    
    #sidebar {
        margin-left: -250px;
        /* On mobile, place on top of content */
        position: fixed;
        top: 0;
        left: 0;
    }
    
    #sidebar.active {
        margin-left: 0;
    }
    
    .page-content {
        padding: 0 15px 20px;
    }
}

/* 视频容器响应式调整已移至顶部统一定义 */

/* recent-images 样式已在上方统一定义 */

/* 卡片样式 */
.card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: none;
    margin-bottom: 12px; /* reduced from 20px */
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 6px 8px; /* further reduced left/right padding */
}

/* Dashboard equal-height layout for top row */
@media (min-width: 769px) {
    .dashboard-equal {
        align-items: stretch; /* stretch columns to the height of the tallest */
    }
    .dashboard-equal > [class^="col-"],
    .dashboard-equal > [class*=" col-"] {
        display: flex;
    }
    .dashboard-equal .col-md-8 {
        align-items: stretch;
    }
    .dashboard-equal .col-md-8 > .card {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 0 !important; /* override .mb-4 from markup */
    }
    /* Right aside stacks two cards, the last one fills remaining height */
    .dashboard-aside {
        display: flex;
        flex-direction: column;
        min-height: 0; /* allow children to shrink */
    }
    .dashboard-aside > .card { /* top status card */
        flex: 0 0 auto;
        margin-bottom: 6px !important; /* small spacing between stacked cards */
    }
    .dashboard-aside > .card:last-child { /* remove trailing gap under the row */
        margin-bottom: 0 !important;
    }
    .dashboard-aside > .fill-card { /* recent events card fills remaining */
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .dashboard-aside > .fill-card .card-body {
        overflow-y: auto; /* scroll inside the card if content exceeds */
    }
}

/* Reduce height of header buttons and tabs inside card headers */
.card-header .btn.btn-sm {
    padding: 2px 8px;
    line-height: 1.2;
}

.card-header .nav-tabs .nav-link,
.card-header .nav-link {
    padding: 4px 8px;
    line-height: 1.2;
}

/* Compress float-end toolbar inside headers */
.card-header .float-end {
    margin-top: .25rem !important; /* ~mt-1 */
}

/* 版权信息样式 */
.copyright-footer {
    flex: 0 0 auto;
    text-align: center;
    padding: 6px 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 4px;
}

.copyright-footer a,
.copyright-footer a:visited {
    color: #00d4ff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease, text-shadow 0.2s ease, opacity 0.2s ease;
}

.copyright-footer a:hover {
    color: #00ff88;
    text-decoration: none;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.35);
}

.copyright-footer a:focus-visible {
    outline: 2px solid rgba(0, 212, 255, 0.55);
    outline-offset: 2px;
    border-radius: 4px;
}

/* 视频容器最终样式 - 确保最大化填充 */
.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
}

#video-stream {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain; /* 保持完整画面 */
}

/* 状态项样式 */
.status-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.status-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.status-label {
    font-weight: 500;
    color: #555;
}

.status-value {
    font-weight: 600;
}

/* 最近事件列表样式 */
#recent-events .list-group-item {
    padding: 10px 15px;
    border-left: none;
    border-right: none;
}

.event-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-time {
    font-size: 0.8rem;
    color: #777;
}

.event-type {
    font-weight: 500;
}

.event-type.bucket {
    color: #28a745;
}

.event-type.intrusion {
    color: #dc3545;
}

.event-type.error {
    color: #dc3545;
}

.event-type.warning {
    color: #ffc107;
}

.event-type.info {
    color: #17a2b8;
}

/* 最近图像样式 - 2列3行网格，填满容器高度 */
.recent-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr); /* 固定3行，均分高度填满 */
    overflow: hidden;
    padding: 4px;
    gap: 6px;
    width: 100%;
    height: 100%; /* 填满父容器 */
}

/* 只显示前6张图片（2列×3行） */
.recent-images .image-item:nth-child(n+7) {
    display: none;
}

.image-item {
    flex: 1 1 auto;
    width: auto;
    min-width: 0; /* allow grid to control size and wrap */
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s;
}

.image-item:hover {
    transform: scale(1.03);
}

/* Default gallery tile image size - 固定图片长宽比 */
.image-gallery .image-item {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    height: auto !important; /* 不压缩高度 */
    min-height: auto !important;
}

.image-gallery .image-item img {
    width: 100% !important;
    height: auto !important; /* 让aspect-ratio控制高度 */
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important; /* 固定4:3比例 */
    object-fit: cover !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

.image-gallery .image-item .image-info {
    padding: 8px;
    flex-shrink: 0;
}

.image-gallery .image-item .d-flex {
    padding: 4px 8px 8px 8px;
    flex-shrink: 0;
}

/* Recent images: tiles fill container height */
.recent-images .image-item {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
    height: 100%; /* 填满网格单元 */
}
.recent-images .image-item img {
    width: 100%;
    height: 100%;                  /* 填满容器 */
    object-fit: cover;             /* 裁剪填满 */
    background: #000;
    display: block;
    transition: transform 0.2s ease;
    will-change: transform;
    transform-origin: center center;
}

/* Make the bottom dashboard card more compact */
#dashboard-page > .container-fluid > .dashboard-bottom-card .card-header {
    padding-top: 4px;
    padding-bottom: 4px;
}
#dashboard-page > .container-fluid > .dashboard-bottom-card .card-body {
    padding-top: 6px;
    padding-bottom: 6px;
}
.recent-images .image-item .img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.1);   /* 0.9 transparency -> 0.1 opacity */
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.recent-images .image-item:hover img {
    transform: scale(1.03);
}
.recent-images .image-item:hover .img-overlay {
    opacity: 0;
}

/* Prevent container scaling (which can cause jitter) in recent-images */
.recent-images .image-item { transition: none !important; }
.recent-images .image-item:hover { transform: none !important; }
/* Time badge (top-right) */
.recent-images .image-item .img-time {
    position: absolute;
    top: 6px;
    left: 6px;  /* move to top-left */
    background: rgba(255,255,255,0.85);
    color: #111;
    padding: 2px 6px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 6px;
    line-height: 1.1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* Status (bottom-right) */
.recent-images .image-item .img-status {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem; /* reduce label size */
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.recent-images .image-item .status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.6) inset, 0 0 4px rgba(0,0,0,0.4);
}
.recent-images .image-item .dot-ok { background-color: #28a745; }
.recent-images .image-item .dot-warn { background-color: #ffc107; }
.recent-images .image-item .dot-danger { background-color: #dc3545; }

.image-info {
    padding: 8px;
    background-color: #fff;
    font-size: 0.8rem;
}

.image-time {
    color: #777;
}

.image-type {
    font-weight: 500;
}

/* 图像页面布局 - 自适应窗口高度 */
#images-page:not(.d-none) {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 56px) !important; /* 减去导航栏高度 */
    max-height: calc(100vh - 56px) !important;
    overflow: hidden !important;
}

#images-page:not(.d-none) > .container-fluid {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 8px 12px 0 12px !important;
}

#images-page:not(.d-none) .page-title {
    flex-shrink: 0 !important;
    margin-bottom: 0.5rem !important;
    font-size: 1.25rem !important;
}

#images-page:not(.d-none) .card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

#images-page:not(.d-none) .card-header {
    flex-shrink: 0 !important;
}

#images-page:not(.d-none) .card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding-bottom: 10px !important;
}

#images-page:not(.d-none) .tab-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

#images-page:not(.d-none) .tab-pane.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

#images-page:not(.d-none) .tab-pane:not(.active) {
    display: none !important;
}

/* 工具栏固定 */
#images-page:not(.d-none) .tab-pane > .d-flex:first-child {
    flex-shrink: 0 !important;
}

/* 图像库样式 - 自适应高度并可滚动 */
.image-gallery {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    grid-auto-rows: min-content !important; /* 行高由内容决定，不压缩 */
    gap: 15px !important;
    padding: 10px 5px 10px 0 !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-content: start !important; /* 内容从顶部开始，不拉伸 */
}

/* 图像库滚动条样式 */
.image-gallery::-webkit-scrollbar {
    width: 8px;
}

.image-gallery::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.image-gallery::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.image-gallery::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* 分页固定在底部 */
#images-page:not(.d-none) nav {
    flex-shrink: 0 !important;
    padding: 8px 0 !important;
    background: inherit;
    border-top: 1px solid rgba(0,0,0,0.1);
}

#images-page:not(.d-none) .pagination {
    margin-bottom: 0 !important;
    justify-content: center;
}

/* 事件页面布局 - 自适应窗口高度 */
#events-page:not(.d-none) {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 56px) !important;
    max-height: calc(100vh - 56px) !important;
    overflow: hidden !important;
}

#events-page:not(.d-none) > .container-fluid {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 8px 12px 0 12px !important;
}

#events-page:not(.d-none) .page-title {
    flex-shrink: 0 !important;
    margin-bottom: 0.5rem !important;
    font-size: 1.25rem !important;
}

#events-page:not(.d-none) .card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

#events-page:not(.d-none) .card-header {
    flex-shrink: 0 !important;
}

#events-page:not(.d-none) .card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding-bottom: 10px !important;
}

#events-page:not(.d-none) .tab-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

#events-page:not(.d-none) .tab-pane.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

#events-page:not(.d-none) .tab-pane:not(.active) {
    display: none !important;
}

/* 工具栏固定 */
#events-page:not(.d-none) .tab-pane > .d-flex:first-child {
    flex-shrink: 0 !important;
}

/* 表格容器可滚动 */
#events-page:not(.d-none) .table-responsive {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* 分页固定在底部 */
#events-page:not(.d-none) nav {
    flex-shrink: 0 !important;
    padding: 8px 0 !important;
    background: inherit;
    border-top: 1px solid rgba(0,0,0,0.1);
}

#events-page:not(.d-none) .pagination {
    margin-bottom: 0 !important;
    justify-content: center;
}

/* 设置页面布局 - card-body填充到底部 */
#settings-page:not(.d-none) {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 56px) !important;
    overflow: hidden !important;
}

#settings-page:not(.d-none) > .container-fluid {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding: 8px 12px 2px 12px !important;
}

#settings-page:not(.d-none) > .container-fluid > .card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    margin-bottom: 2px !important;
}

#settings-page:not(.d-none) .card-header {
    flex-shrink: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 1px solid #dee2e6 !important;
}

#settings-page:not(.d-none) .card-header .nav-tabs {
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

#settings-page:not(.d-none) .card-header .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
    padding-bottom: 8px !important;
}

#settings-page:not(.d-none) .card-header .nav-link.active {
    border-bottom: 2px solid #0d6efd !important;
}

#settings-page:not(.d-none) .card > .card-body {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

#settings-page:not(.d-none) .card > .card-body > .tab-content {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 10px !important;
}

#settings-page:not(.d-none) .card > .card-body > .tab-content > .tab-pane {
    padding: 10px 0 !important;
}

/* 事件表格样式 */
.table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.severity-badge {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 20px;
}

.severity-1 {
    background-color: #17a2b8;
}

.severity-2 {
    background-color: #28a745;
}

.severity-3 {
    background-color: #ffc107;
    color: #212529;
}

.severity-4 {
    background-color: #fd7e14;
}

.severity-5 {
    background-color: #dc3545;
}

/* 表单样式 */
.form-label {
    font-weight: 500;
}

/* Dark theme form controls */
.form-control, .form-select {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e8eaed;
}

.form-control:focus, .form-select:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #00d4ff;
    color: #e8eaed;
    box-shadow: 0 0 0 0.25rem rgba(0, 212, 255, 0.15);
}

.form-control::placeholder {
    color: rgba(232, 234, 237, 0.5);
}

/* Fix option text color in dark select */
.form-select option {
    background-color: #1a2332;
    color: #e8eaed;
}

.input-group-text {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e8eaed;
}

/* 模态框样式 */
#image-modal .modal-dialog {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

#image-modal .modal-content {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: rgba(26, 35, 50, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#image-modal .modal-header {
    flex-shrink: 0;
    background: rgba(15, 20, 25, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

#image-modal .modal-header .btn-close {
    filter: invert(1);
}

#image-modal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

#image-modal .modal-body::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

#image-modal .modal-title {
    color: #fff;
}

#image-modal #image-details {
    background: rgba(15, 20, 25, 0.6);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#image-modal #image-details h6 {
    color: var(--accent-cyan, #00d4ff);
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

#image-modal .table {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
    background: transparent !important;
}

#image-modal .table tbody {
    background: transparent !important;
}

#image-modal .table tr {
    background: transparent !important;
}

#image-modal .table td {
    border-color: rgba(255, 255, 255, 0.08);
    padding: 10px 12px;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85);
}

#image-modal .table td:first-child {
    width: 100px;
    background: transparent !important;
}

#image-modal .table td:first-child strong {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

#image-modal .table td:last-child {
    color: rgba(255, 255, 255, 0.9);
}

#image-modal .text-muted {
    color: #00d4ff !important;
    font-weight: 500;
}

#image-modal .table tr:last-child td {
    border-bottom: none;
}

#image-modal .table-sm {
    background: transparent !important;
}

.modal-header {
    background-color: #f8f9fa;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .modal-content {
    --bs-modal-color: #e8eaed;
    --bs-modal-bg: #151e2b;
    --bs-modal-border-color: rgba(142, 200, 232, 0.35);
    background: linear-gradient(135deg, #1a2636 0%, #111923 100%);
    border-color: rgba(142, 200, 232, 0.35);
    color: #e8eaed;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .modal-header,
:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .modal-footer {
    background: rgba(7, 13, 20, 0.58);
    border-color: rgba(142, 200, 232, 0.22);
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .modal-title,
:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) h6,
:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .form-label,
:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .form-check-label {
    color: #f4f7fa;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .modal-title {
    font-weight: 600;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .btn-close {
    filter: invert(1) grayscale(100%) brightness(220%);
    opacity: 0.85;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .btn-close:hover {
    opacity: 1;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .text-muted,
:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .form-text {
    color: #afc4d6 !important;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .form-control,
:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .form-select {
    background-color: #0d1620;
    border-color: #627b91;
    color: #f4f7fa;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .form-control::placeholder {
    color: #9eb1c2;
    opacity: 1;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .form-control:focus,
:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .form-select:focus {
    background-color: #111f2d;
    border-color: #39d5ff;
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(57, 213, 255, 0.22);
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .form-select option {
    background-color: #111923;
    color: #f4f7fa;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .card,
:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .lens-fog-test-column,
:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .lens-fog-labeled-item,
:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .lens-fog-metric {
    background-color: rgba(8, 16, 24, 0.48);
    border-color: rgba(142, 200, 232, 0.3) !important;
    color: #e8eaed;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .card-header {
    background-color: rgba(0, 212, 255, 0.1);
    border-color: rgba(142, 200, 232, 0.25);
    color: #f4f7fa;
    font-weight: 600;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .table {
    --bs-table-color: #e8eaed;
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(142, 200, 232, 0.22);
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: rgba(0, 212, 255, 0.1);
    color: #e8eaed;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .table th {
    background-color: #202f40;
    color: #f4f7fa;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .alert-secondary,
:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .alert-info {
    background-color: rgba(31, 112, 145, 0.24);
    border-color: rgba(82, 200, 235, 0.5);
    color: #e8f7ff;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .btn-outline-secondary {
    border-color: #8398aa;
    color: #d4dee7;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .btn-outline-secondary:hover {
    background-color: #8398aa;
    color: #0b1118;
}

:is(#lens-fog-test-modal, #user-editor-modal, #user-login-modal) .btn-outline-info {
    border-color: #39d5ff;
    color: #7ee6ff;
}

#modal-image {
    width: 100%;
    max-height: 50vh;
    object-fit: contain;
    border-radius: 4px;
}

/* 全屏样式 */
.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fullscreen img {
    max-width: 100%;
    max-height: 100%;
}

.fullscreen-exit {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .image-gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .status-item {
        flex-direction: column;
    }
    
    .status-value {
        margin-top: 5px;
    }
}
.dashboard-bottom-card .monitor-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
/* Dashboard page content - fill remaining space using flex */
#dashboard-page.page-content,
.page-content.dashboard-monitor {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 4px !important;
}

.page-content.dashboard-monitor > .container-fluid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    height: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ==================== 事件记录卡片样式 ==================== */
.event-log-card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: var(--dashboard-card-gap, 6px);
}

.event-log-card .monitor-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding: 8px;
}

.event-log-list {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.3) transparent;
}

.event-log-list::-webkit-scrollbar {
    width: 4px;
}

.event-log-list::-webkit-scrollbar-track {
    background: transparent;
}

.event-log-list::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.3);
    border-radius: 2px;
}

/* 空状态 */
.event-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    gap: 8px;
}

.event-empty i {
    font-size: 1.5rem;
    color: var(--accent-success, #00ff88);
    opacity: 0.5;
}

/* 事件项 */
.event-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    border-left: 3px solid var(--accent-cyan, #00d4ff);
    transition: all 0.2s ease;
}

.event-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.event-item.event-warning {
    border-left-color: #ffb800;
}

.event-item.event-error {
    border-left-color: #ff4757;
}

.event-item.event-success {
    border-left-color: var(--accent-success, #00ff88);
}

.event-item.event-info {
    border-left-color: var(--accent-cyan, #00d4ff);
}

/* 事件图标 */
.event-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
}

.event-warning .event-icon {
    background: rgba(255, 184, 0, 0.15);
    color: #ffb800;
}

.event-error .event-icon {
    background: rgba(255, 71, 87, 0.15);
    color: #ff4757;
}

.event-success .event-icon {
    background: rgba(0, 255, 136, 0.15);
    color: var(--accent-success, #00ff88);
}

.event-info .event-icon {
    background: rgba(0, 212, 255, 0.15);
    color: var(--accent-cyan, #00d4ff);
}

/* 事件内容 */
.event-content {
    flex: 1;
    min-width: 0;
}

.event-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-desc {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-time {
    flex-shrink: 0;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: right;
}

/* 右侧列布局调整 - 两个卡片分配空间 */
.dashboard-main .col-3:last-child {
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-card-gap, 6px);
}

.dashboard-main .col-3:last-child .angle-monitor {
    flex: 1 1 50%;
    min-height: 0;
    margin-bottom: 0 !important;
}

.dashboard-main .col-3:last-child .event-log-card {
    flex: 1 1 50%;
    min-height: 0;
    margin-top: 0;
}

/* ==================== 调度管理页面样式 ==================== */
#scheduler-page {
    padding: 20px;
}

#scheduler-page .card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

#scheduler-page .card-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #00d4ff;
}

#scheduler-page .list-group-item {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e8eaed;
}

#scheduler-page .list-group-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

#scheduler-page .list-group-item.active {
    background: rgba(0, 212, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.3);
}

#scheduler-page .badge {
    font-weight: 500;
}

#scheduler-page .table {
    color: #e8eaed;
}

#scheduler-page .table-light {
    background: rgba(255, 255, 255, 0.05);
    color: #a0a6b0;
}

#thresholds-page {
    padding: 20px;
}

#thresholds-page .card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

#thresholds-page .card-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #00d4ff;
}

#thresholds-page .card-body {
    background: rgba(255, 255, 255, 0.03);
    color: #e8eaed;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

#thresholds-page .badge {
    font-weight: 500;
}

#thresholds-page h4 {
    color: #00d4ff;
}

#thresholds-page .form-text {
    color: #8ec8e8 !important;
}

/* ==================== 数据接口页面样式 ==================== */
#data-interface-page {
    padding: 20px;
}

#data-interface-page .col-md-7 {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

#data-interface-page .card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

#data-interface-page .card-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #00d4ff;
}

#data-interface-page .card-body {
    background: rgba(255, 255, 255, 0.03);
    color: #e8eaed;
}

#data-interface-page .list-group-item {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e8eaed;
}

#data-interface-page .list-group-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

#data-interface-page .list-group-item.active {
    background: rgba(0, 212, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.3);
}

#data-interface-page .badge {
    font-weight: 500;
}

#data-interface-page .table {
    color: #e8eaed;
}

#data-interface-page .table {
    background: transparent;
}

#data-interface-page .table thead th {
    background: rgba(255, 255, 255, 0.05);
    color: #a0a6b0;
    border-color: rgba(255, 255, 255, 0.1);
}

#data-interface-page .table tbody,
#data-interface-page .table tbody td,
#data-interface-page .table tbody tr {
    background: transparent !important;
    color: #e8eaed;
    border-color: rgba(255, 255, 255, 0.1);
}

#data-interface-page .table-hover tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

#data-interface-page h4 {
    color: #00d4ff;
}

#data-interface-page .text-muted {
    color: #8ec8e8 !important;
}

#data-interface-page dl dt {
    color: #a0a6b0;
}

#data-interface-page dl dd {
    color: #e8eaed;
}

/* 预览调参模态框样式 */
#cameraParamsModal .modal-content {
    background: linear-gradient(135deg, #1a2332 0%, #0f1419 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e8eaed;
}

#cameraParamsModal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 212, 255, 0.08);
}

#cameraParamsModal .modal-header .modal-title {
    color: #00d4ff;
    font-weight: 600;
}

#cameraParamsModal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

#cameraParamsModal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#cameraParamsModal .card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

#cameraParamsModal .card-header {
    background: rgba(0, 212, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #e8eaed;
}

#cameraParamsModal .card-header .small {
    color: #00d4ff;
}

#cameraParamsModal .form-label,
#cameraParamsModal .form-check-label {
    color: #a0a6b0;
}

#cameraParamsModal .form-control,
#cameraParamsModal .form-select {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e8eaed;
}

#cameraParamsModal .form-select option {
    background: #1a2332;
    color: #e8eaed;
}

#cameraParamsModal .form-control:focus,
#cameraParamsModal .form-select:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #00d4ff;
    color: #e8eaed;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
}

#cameraParamsModal .form-range::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.15);
}

#cameraParamsModal .form-range::-webkit-slider-thumb {
    background: #00d4ff;
}

#cameraParamsModal .form-check-input:checked {
    background-color: #00d4ff;
    border-color: #00d4ff;
}

#cameraParamsModal .text-muted {
    color: #8ec8e8 !important;
}

#cameraParamsModal .btn-outline-secondary {
    color: #a0a6b0;
    border-color: rgba(255, 255, 255, 0.2);
}

#cameraParamsModal .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e8eaed;
}

#cameraParamsModal .btn-outline-info {
    color: #00d4ff;
    border-color: rgba(0, 212, 255, 0.5);
}

#cameraParamsModal .btn-outline-info:hover:not(:disabled) {
    background: rgba(0, 212, 255, 0.15);
    color: #00d4ff;
    border-color: #00d4ff;
}

#cameraParamsModal .btn-outline-info:disabled {
    color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.1);
}

/* 数据接口模态框样式 */
#channelModal .modal-content,
#fieldModal .modal-content {
    background: linear-gradient(135deg, #1a2332 0%, #0f1419 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e8eaed;
}

#channelModal .modal-header,
#fieldModal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 212, 255, 0.08);
}

#channelModal .modal-header .modal-title,
#fieldModal .modal-header .modal-title {
    color: #00d4ff;
    font-weight: 600;
}

#channelModal .modal-header .btn-close,
#fieldModal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

#channelModal .modal-footer,
#fieldModal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#channelModal .form-control,
#channelModal .form-select,
#fieldModal .form-control,
#fieldModal .form-select {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e8eaed;
}

#channelModal .form-select option,
#fieldModal .form-select option {
    background: #1a2332;
    color: #e8eaed;
}

#channelModal .form-control:focus,
#channelModal .form-select:focus,
#fieldModal .form-control:focus,
#fieldModal .form-select:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #00d4ff;
    color: #e8eaed;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
}

#channelModal .form-label,
#fieldModal .form-label {
    color: #a0a6b0;
    font-weight: 500;
}

#channelModal .form-check-label,
#fieldModal .form-check-label {
    color: #e8eaed;
}

#channelModal .text-muted,
#fieldModal .text-muted {
    color: #8ec8e8 !important;
}

#channelModal small.text-muted,
#fieldModal small.text-muted {
    color: #8ec8e8 !important;
    font-size: 0.8rem;
}

#channelModal .alert-info,
#fieldModal .alert-info {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.3);
    color: #8ec8e8;
}

#channelModal h6,
#fieldModal h6 {
    color: #00d4ff;
    font-weight: 500;
}

/* Settings page styles (matching scheduler page) */
#settings-page h4 {
    color: #00d4ff;
}

#settings-page .card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#settings-page .card-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #e8eaed;
}

#settings-page .card-body {
    background: transparent;
    color: #e8eaed;
}

#settings-page .nav-tabs .nav-link {
    color: #a0a6b0;
    border: 1px solid transparent;
}

#settings-page .nav-tabs .nav-link:hover {
    color: #00d4ff;
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

#settings-page .nav-tabs .nav-link.active {
    background: rgba(0, 212, 255, 0.1);
    color: #00d4ff;
    border-color: rgba(0, 212, 255, 0.3);
    border-bottom-color: transparent;
}

#settings-page .text-muted {
    color: #8ec8e8 !important;
}

#settings-page .form-control,
#settings-page .form-select {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e8eaed;
}

#settings-page .form-control:focus,
#settings-page .form-select:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #00d4ff;
    box-shadow: 0 0 0 0.25rem rgba(0, 212, 255, 0.25);
}

#settings-page .input-group-text {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e8eaed;
}

#settings-page .table {
    color: #e8eaed;
    background-color: transparent !important;
}

#settings-page .table tbody,
#settings-page .table td,
#settings-page .table tr {
    background-color: transparent !important;
    color: #e8eaed;
}

#settings-page .table thead th {
    background: rgba(255, 255, 255, 0.1);
    color: #00d4ff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#settings-page .table tbody td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#settings-page .table-hover tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

#settings-page .form-text {
    color: #8ec8e8;
    font-size: 0.875em;
}

#settings-page .table .form-control,
#settings-page .table .form-select {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e8eaed;
}

#settings-page .table .form-control:focus,
#settings-page .table .form-select:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #00d4ff;
    box-shadow: 0 0 0 0.25rem rgba(0, 212, 255, 0.25);
}

/* Modbus action fields specific styling */
.action-fields .row.g-2 {
    align-items: center;
}

#scheduler-page .table-hover tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

#scheduler-page pre {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #00ff88;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#scheduler-page h4 {
    color: #00d4ff;
}

#scheduler-page .text-muted,
#task-modal .text-muted,
#rule-modal .text-muted {
    color: #8ec8e8 !important;
}

#task-modal small.text-muted,
#rule-modal small.text-muted {
    color: #8ec8e8 !important;
    font-size: 0.8rem;
}

/* 规则详情卡片样式 */
#rule-detail-container .card-body {
    background: rgba(255, 255, 255, 0.03);
    color: #e8eaed;
}

#rule-detail-container .card-body p,
#rule-detail-container .card-body div {
    color: #e8eaed;
}

#rule-detail-container .card-body strong {
    color: #a0a6b0;
    font-weight: 500;
}

#rule-detail-container #rule-name,
#rule-detail-container #rule-description {
    color: #00d4ff !important;
    font-weight: 500;
}

#rule-detail-container #rule-trigger-type {
    color: #00d4ff !important;
}

#rule-detail-container #rule-trigger-config {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #00ff88 !important;
    background: rgba(0, 0, 0, 0.3);
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* 调度管理模态框样式 */
#rule-modal .modal-content,
#task-modal .modal-content {
    background: linear-gradient(135deg, #1a2332 0%, #0f1419 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e8eaed;
}

#rule-modal .modal-header,
#task-modal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 212, 255, 0.08);
}

#rule-modal .modal-header .modal-title,
#task-modal .modal-header .modal-title {
    color: #00d4ff;
    font-weight: 600;
}

#rule-modal .modal-header .btn-close,
#task-modal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

#rule-modal .modal-footer,
#task-modal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#rule-modal .form-control,
#rule-modal .form-select,
#task-modal .form-control,
#task-modal .form-select {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e8eaed;
}

#rule-modal .form-select option,
#task-modal .form-select option {
    background: #1a2332;
    color: #e8eaed;
}

#rule-modal .form-control:focus,
#rule-modal .form-select:focus,
#task-modal .form-control:focus,
#task-modal .form-select:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #00d4ff;
    color: #e8eaed;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
}

#rule-modal .form-label,
#task-modal .form-label {
    color: #a0a6b0;
}

#rule-modal .form-check-label,
#task-modal .form-check-label {
    color: #e8eaed;
}

#task-modal .bg-light {
    background: rgba(255, 255, 255, 0.05) !important;
}

#task-modal .task-config-section h6 {
    color: #00d4ff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

/* 任务拖拽手柄样式 */
#tasks-list .list-group-item {
    cursor: default;
}

#tasks-list .list-group-item:active {
    cursor: grabbing;
}

#tasks-list .fa-grip-vertical {
    color: #5a6270;
    cursor: grab;
    touch-action: none;
}

#tasks-list .fa-grip-vertical:hover {
    color: #00d4ff;
}

body.tasks-dragging,
body.tasks-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
}

/* ==================== 数据记录页面样式 ==================== */
#data-records-page .card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    color: #e8eaed;
}

#data-records-page .card-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #00d4ff;
}

#data-records-page .card-header h6 {
    color: #00d4ff;
}

#data-records-page .card-header .btn-primary {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

#data-records-page .card-header .btn-primary:hover {
    background: linear-gradient(135deg, #33ddff 0%, #00aadd 100%);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.5);
}

/* 规则卡片样式 */
#data-records-page .rule-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-left: 3px solid !important;
    transition: all 0.3s ease;
}

#data-records-page .rule-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

#data-records-page .rule-card.border-success {
    border-left-color: #00ff88 !important;
}

#data-records-page .rule-card.border-warning {
    border-left-color: #ffaa00 !important;
}

#data-records-page .rule-card.border-secondary {
    border-left-color: #6c757d !important;
}

#data-records-page .rule-card h6 {
    color: #e8eaed;
}

#data-records-page .rule-card .text-muted {
    color: #a0a6b0 !important;
}

#data-records-page .rule-card .badge {
    font-weight: 500;
}

#data-records-page .rule-card .badge.bg-success {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%) !important;
}

#data-records-page .rule-card .badge.bg-warning {
    background: linear-gradient(135deg, #ffaa00 0%, #ff8800 100%) !important;
    color: #1a1a2e !important;
}

/* 规则卡片按钮 */
#data-records-page .rule-card .btn-group .btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #a0a6b0;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

#data-records-page .rule-card .btn-group .btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #e8eaed;
}

#data-records-page .rule-card .btn-outline-primary:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: #00d4ff;
    color: #00d4ff;
}

#data-records-page .rule-card .btn-outline-success:hover {
    background: rgba(0, 255, 136, 0.2);
    border-color: #00ff88;
    color: #00ff88;
}

#data-records-page .rule-card .btn-outline-danger:hover {
    background: rgba(255, 68, 68, 0.2);
    border-color: #ff4444;
    color: #ff4444;
}

/* 选项卡样式 */
#data-records-page .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#data-records-page .nav-tabs .nav-link {
    color: #a0a6b0;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 1rem;
}

#data-records-page .nav-tabs .nav-link:hover {
    color: #e8eaed;
    border-bottom-color: rgba(0, 212, 255, 0.5);
}

#data-records-page .nav-tabs .nav-link.active {
    color: #00d4ff;
    background: rgba(0, 212, 255, 0.1);
    border-bottom-color: #00d4ff;
}

#data-records-page .nav-tabs .nav-link .btn-close {
    filter: invert(1);
    opacity: 0.5;
}

#data-records-page .nav-tabs .nav-link .btn-close:hover {
    opacity: 1;
}

/* 数据表格样式 */
#data-records-page .table {
    color: #e8eaed;
}

#data-records-page .table-dark {
    background: rgba(0, 212, 255, 0.15);
}

#data-records-page .table-dark th {
    background: rgba(0, 212, 255, 0.2);
    color: #00d4ff;
    border-color: rgba(255, 255, 255, 0.1);
}

#data-records-page .table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.03);
}

#data-records-page .table-striped > tbody > tr:nth-of-type(even) {
    background: rgba(255, 255, 255, 0.06);
}

#data-records-page .table-hover > tbody > tr:hover {
    background: rgba(0, 212, 255, 0.1);
}

#data-records-page .table td {
    border-color: rgba(255, 255, 255, 0.05);
}

/* 分页样式 */
#data-records-page .pagination .page-link {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #a0a6b0;
}

#data-records-page .pagination .page-link:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: #00d4ff;
    color: #00d4ff;
}

#data-records-page .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    border-color: #00d4ff;
    color: #fff;
}

#data-records-page .pagination .page-item.disabled .page-link {
    background: rgba(255, 255, 255, 0.03);
    color: #5a6270;
}

/* 占位符样式 */
#data-records-page #no-tabs-placeholder {
    color: #5a6270;
}

#data-records-page #no-tabs-placeholder i {
    color: #3a4250;
}

/* 确保内容区域正确显示 */
#data-records-page .tab-content {
    min-height: 400px;
}

#data-records-page .tab-pane {
    min-height: 300px;
}

#data-records-page .tab-pane.active {
    display: block !important;
}

/* 图表控制区域 */
#data-records-page .form-check-input:checked {
    background-color: #00d4ff;
    border-color: #00d4ff;
}

#data-records-page .btn-outline-primary {
    color: #00d4ff;
    border-color: #00d4ff;
}

#data-records-page .btn-outline-primary:hover {
    background: rgba(0, 212, 255, 0.2);
    color: #00d4ff;
}

#data-records-page .btn-outline-secondary {
    color: #a0a6b0;
    border-color: rgba(255, 255, 255, 0.2);
}

#data-records-page .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e8eaed;
}

/* 模态框样式 */
#data-rule-modal .modal-content {
    background: rgba(26, 35, 50, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    color: #e8eaed;
}

#data-rule-modal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#data-rule-modal .modal-title {
    color: #00d4ff;
}

#data-rule-modal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#data-rule-modal .form-control,
#data-rule-modal .form-select {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e8eaed;
}

#data-rule-modal .form-control:focus,
#data-rule-modal .form-select:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #00d4ff;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
}

#data-rule-modal .form-label {
    color: #a0a6b0;
}

#data-rule-modal h6 {
    color: #00d4ff;
}

#data-rule-modal .curve-config-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1) !important;
}

#data-rule-modal .curve-config-item .card-header {
    background: rgba(255, 255, 255, 0.05);
}

#data-rule-modal fieldset {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

#data-rule-modal legend {
    color: #a0a6b0;
}

/* 身份验证模态框样式（导航鉴权） */
#nav-auth-modal .modal-content {
    background: linear-gradient(135deg, rgba(26, 35, 50, 0.98) 0%, rgba(15, 20, 25, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e8eaed;
    backdrop-filter: blur(20px);
}

#nav-auth-modal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 212, 255, 0.08);
}

#nav-auth-modal .modal-header .modal-title {
    color: #00d4ff;
    font-weight: 600;
}

#nav-auth-modal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

#nav-auth-modal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#nav-auth-modal .form-label {
    color: rgba(255, 255, 255, 0.75);
}

#nav-auth-modal .form-control {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e8eaed;
}

#nav-auth-modal .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

#nav-auth-modal .form-control:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: 0 0 0 0.25rem rgba(0, 212, 255, 0.15);
    color: #e8eaed;
}

#nav-auth-modal .btn-primary {
    background: rgba(0, 212, 255, 0.16);
    border-color: rgba(0, 212, 255, 0.5);
    color: #00d4ff;
}

#nav-auth-modal .btn-primary:hover {
    background: rgba(0, 212, 255, 0.25);
    border-color: rgba(0, 212, 255, 0.75);
    color: #00d4ff;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.25);
}

#nav-auth-modal .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.75);
}

#nav-auth-modal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: #e8eaed;
}

#dashboard-page.dashboard-rope-phone {
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#dashboard-page.dashboard-rope-phone .dashboard-phone-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    gap: 8px;
}

#dashboard-page.dashboard-rope-phone .dashboard-phone-video {
    flex: 0 0 auto;
}

#dashboard-page.dashboard-rope-phone .dashboard-phone-video .monitor-body {
    padding: 6px !important;
}

#dashboard-page.dashboard-rope-phone .dashboard-phone-video .video-container {
    width: 100% !important;
    height: min(32vh, 320px) !important;
    min-height: 180px;
}

#dashboard-page.dashboard-rope-phone .dashboard-phone-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 4px;
}

#dashboard-page.dashboard-rope-phone .dashboard-phone-nav {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 20, 25, 0.92);
    backdrop-filter: blur(18px);
}

#dashboard-page.dashboard-rope-phone .phone-nav-btn {
    appearance: none;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 10px;
    color: #e8eaed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    min-height: 48px;
    line-height: 1.1;
}

#dashboard-page.dashboard-rope-phone .phone-nav-btn .icon {
    width: 1.05rem;
    height: 1.05rem;
    color: #00d4ff;
}

#dashboard-page.dashboard-rope-phone .phone-nav-btn span {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.78);
}

#dashboard-page.dashboard-rope-phone .phone-nav-btn:hover {
    background: rgba(0, 212, 255, 0.14);
    border-color: rgba(0, 212, 255, 0.45);
}

#dashboard-page.dashboard-rope-phone .angle-item {
    padding: 8px;
}

#dashboard-page.dashboard-rope-phone .angle-label {
    font-size: 0.78rem;
}

#dashboard-page.dashboard-rope-phone .device-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
}

#dashboard-page.dashboard-rope-phone .device-item {
    padding: 6px 8px;
}

#dashboard-page.dashboard-rope-phone .device-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 1rem;
    margin-right: 8px;
}

#dashboard-page.dashboard-rope-phone .device-name {
    font-size: 0.72rem;
    margin-bottom: 2px;
}

#dashboard-page.dashboard-rope-phone .device-value {
    font-size: 0.85rem;
}

/* 自定义确认对话框样式 */
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.custom-modal-content {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    min-width: 400px;
    max-width: 500px;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.custom-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.custom-modal-body {
    padding: 24px;
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.6;
}

.custom-modal-body p {
    margin: 0;
    white-space: pre-line;
}

.custom-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.custom-modal-footer .btn {
    min-width: 80px;
    font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 576px) {
    .custom-modal-content {
        min-width: 90%;
        max-width: 90%;
        margin: 0 20px;
    }
}

/* ==================== 数据管理页面样式 ==================== */
#data-management-page {
    padding: 20px;
}

#data-management-page .card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

#data-management-page .card-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #00d4ff;
    font-weight: 600;
}

#data-management-page .card-body {
    background: rgba(255, 255, 255, 0.03);
    color: #e8eaed;
}

/* 导出/导入表单样式 */
#data-management-page .form-label {
    color: #a0c4e8;
    font-weight: 500;
}

#data-management-page .form-control,
#data-management-page .form-select {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e8eaed;
}

#data-management-page .form-control:focus,
#data-management-page .form-select:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #00d4ff;
    color: #e8eaed;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
}

#data-management-page .form-control::placeholder {
    color: rgba(232, 234, 237, 0.5);
}

#data-management-page .form-check-input {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

#data-management-page .form-check-input:checked {
    background-color: #00d4ff;
    border-color: #00d4ff;
}

#data-management-page .form-check-label {
    color: #e8eaed;
}

#data-management-page .form-text {
    color: #8ec8e8 !important;
}

/* 进度条样式 */
#data-management-page .progress {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

#data-management-page .progress-bar {
    background: linear-gradient(90deg, #00d4ff, #00ff88);
}

/* 日志区域样式 */
#data-management-page #export-log,
#data-management-page #import-log {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e8eaed;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
}

/* 历史记录卡片自适应高度布局 */
#data-management-page #history-content .card {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 220px);
    min-height: 500px;
}

#data-management-page #history-content .card-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#data-management-page #history-content .table-responsive {
    flex: 1;
    overflow-y: auto;
}

/* 历史记录表格滚动条样式 */
#data-management-page #history-content .table-responsive::-webkit-scrollbar {
    width: 8px;
}

#data-management-page #history-content .table-responsive::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

#data-management-page #history-content .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.5);
    border-radius: 4px;
}

#data-management-page #history-content .table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.7);
}

/* 历史记录表格样式 */
#data-management-page #history-table {
    color: #e8eaed;
    margin-bottom: 0;
}

#data-management-page #history-table thead th {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 168, 204, 0.1) 100%) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
    color: #00d4ff !important;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
}

#data-management-page #history-table tbody td {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #d0dce8 !important;
    background: transparent !important;
}

#data-management-page #history-table tbody tr {
    background: transparent !important;
}

#data-management-page #history-table tbody tr:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(0, 212, 255, 0.05) 100%) !important;
}

#data-management-page #history-table tbody tr.selected {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 212, 255, 0.15) 100%) !important;
}

/* 覆盖Bootstrap的table-light类 */
#data-management-page .table-light {
    background: transparent !important;
    color: inherit !important;
}

/* 历史记录分页样式 */
#data-management-page .pagination-container {
    padding: 1rem 1.5rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
    border-top: 1px solid rgba(0, 212, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#data-management-page .pagination {
    margin: 0;
}

#data-management-page .pagination .page-link {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #00d4ff;
}

#data-management-page .pagination .page-link:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: rgba(0, 212, 255, 0.4);
    color: #ffffff;
}

#data-management-page .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border-color: #00d4ff;
    color: #000;
    font-weight: 600;
}

#data-management-page .pagination .page-item.disabled .page-link {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
}

/* Badge样式 */
#data-management-page .badge {
    font-weight: 500;
}

#data-management-page .badge.bg-success {
    background-color: #00ff88 !important;
    color: #000;
}

#data-management-page .badge.bg-danger {
    background-color: #ff4444 !important;
}

#data-management-page .badge.bg-warning {
    background-color: #ffaa00 !important;
    color: #000;
}

/* 按钮样式增强 */
#data-management-page .btn-primary {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

#data-management-page .btn-primary:hover {
    background: linear-gradient(135deg, #00e5ff, #00aadd);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.5);
}

#data-management-page .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.3);
    color: #e8eaed;
}

#data-management-page .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* Tab导航样式 */
#data-management-page .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

#data-management-page .nav-tabs .nav-link {
    color: #a0c4e8;
    border: none;
    border-bottom: 2px solid transparent;
}

#data-management-page .nav-tabs .nav-link:hover {
    color: #00d4ff;
    border-bottom-color: rgba(0, 212, 255, 0.3);
}

#data-management-page .nav-tabs .nav-link.active {
    color: #00d4ff;
    background: transparent;
    border-bottom-color: #00d4ff;
}

/* 增强文字对比度 */
#data-management-page .text-muted {
    color: #b0c4d8 !important;
}

#data-management-page small.text-muted {
    color: #c0d4e8 !important;
    font-weight: 500;
}

#data-management-page p {
    color: #d0dce8;
}

#data-management-page .fa-info-circle {
    color: #00d4ff;
}

#data-management-page i.fas,
#data-management-page i.far {
    color: #a0c4e8;
}

/* 数据库导入对话框样式 */
#database-import-modal .custom-modal-content {
    max-width: 700px;
    background: linear-gradient(135deg, #1a2332 0%, #0f1419 100%);
}

#database-import-modal .custom-modal-header {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 168, 204, 0.1) 100%);
    border-bottom: 1px solid rgba(0, 212, 255, 0.4);
    color: #e8eaed;
}

#database-import-modal .custom-modal-header span {
    color: #e8eaed;
    font-weight: 500;
}

#database-import-modal .custom-modal-body {
    max-height: 500px;
    overflow-y: auto;
    padding: 1.5rem;
}

#database-import-modal .custom-modal-body p {
    color: #d0dce8;
    font-weight: 500;
}

#database-import-modal #database-import-list .border {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
    transition: all 0.3s ease;
}

#database-import-modal #database-import-list .border:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 212, 255, 0.08) 100%);
    border-color: rgba(0, 212, 255, 0.4) !important;
}

#database-import-modal #database-import-list strong {
    color: #e8eaed;
}

#database-import-modal .btn-group {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#database-import-modal .btn-outline-warning {
    border-color: rgba(255, 170, 0, 0.6);
    color: #ffcc66;
    background: rgba(255, 170, 0, 0.05);
}

#database-import-modal .btn-outline-warning:hover,
#database-import-modal .btn-check:checked + .btn-outline-warning {
    background-color: #ffaa00;
    border-color: #ffaa00;
    color: #000;
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.3);
}

#database-import-modal .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.4);
    color: #d0dce8;
    background: rgba(255, 255, 255, 0.05);
}

#database-import-modal .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

#database-import-modal .btn-check:checked + .btn-outline-secondary {
    background: linear-gradient(135deg, rgba(100, 120, 140, 0.6) 0%, rgba(80, 100, 120, 0.5) 100%);
    border-color: rgba(150, 170, 190, 0.8);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(100, 120, 140, 0.4);
    font-weight: 600;
}

#database-import-modal .alert-warning {
    background: rgba(255, 170, 0, 0.15);
    border-color: rgba(255, 170, 0, 0.3);
    color: #ffcc66;
}

#database-import-modal .fa-database {
    color: #00d4ff;
}

/* 数据库导出选择对话框样式 */
#database-export-modal .custom-modal-content {
    max-width: 700px;
    background: linear-gradient(135deg, #1a2332 0%, #0f1419 100%);
}

#database-export-modal .custom-modal-header {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 168, 204, 0.1) 100%);
    border-bottom: 1px solid rgba(0, 212, 255, 0.4);
    color: #e8eaed;
}

#database-export-modal .custom-modal-header span {
    color: #e8eaed;
    font-weight: 500;
}

#database-export-modal .custom-modal-body {
    padding: 1.5rem;
}

#database-export-modal .custom-modal-body p {
    color: #d0dce8;
    font-weight: 500;
}

#database-export-modal .database-list-container {
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

/* 滚动条样式 */
#database-export-modal .database-list-container::-webkit-scrollbar {
    width: 8px;
}

#database-export-modal .database-list-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

#database-export-modal .database-list-container::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.5);
    border-radius: 4px;
}

#database-export-modal .database-list-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.7);
}

#database-export-modal .database-item {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
    transition: all 0.3s ease;
}

#database-export-modal .database-item:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 212, 255, 0.08) 100%);
    border-color: rgba(0, 212, 255, 0.4) !important;
    transform: translateX(5px);
}

#database-export-modal .database-item-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #00d4ff 0%, #00a8cc 100%);
    color: #000;
    font-weight: bold;
    border-radius: 50%;
    margin-right: 12px;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

#database-export-modal .form-check-input {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
    border: 2px solid rgba(0, 212, 255, 0.5);
}

#database-export-modal .form-check-input:checked {
    background-color: #00d4ff;
    border-color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

#database-export-modal .form-check-label {
    cursor: pointer;
    width: 100%;
    color: #e8eaed;
}

#database-export-modal .btn-outline-info {
    border-color: rgba(0, 212, 255, 0.6);
    color: #66e0ff;
    background: rgba(0, 212, 255, 0.05);
}

#database-export-modal .btn-outline-info:hover {
    background-color: rgba(0, 212, 255, 0.25);
    border-color: #00d4ff;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

#database-export-modal .btn-outline-warning {
    border-color: rgba(255, 170, 0, 0.6);
    color: #ffcc66;
    background: rgba(255, 170, 0, 0.05);
}

#database-export-modal .btn-outline-warning:hover {
    background-color: rgba(255, 170, 0, 0.25);
    border-color: #ffaa00;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.3);
}

#database-export-modal .alert-info {
    background: rgba(0, 212, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.3);
    color: #66e0ff;
}

#database-export-modal .fa-database {
    color: #00d4ff;
}

#database-export-modal .badge.bg-secondary {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

/* 数据库选择按钮样式 */
#data-management-page #btn-select-databases {
    border-color: rgba(0, 212, 255, 0.5);
    color: #00d4ff;
}

#data-management-page #btn-select-databases:hover {
    background-color: rgba(0, 212, 255, 0.1);
    border-color: #00d4ff;
    color: #00d4ff;
}

#data-management-page #btn-select-databases .badge.bg-success {
    background-color: #00ff88 !important;
}

/* 导出表单自适应高度布局 */
#data-management-page .export-form-card {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 220px);
    min-height: 500px;
}

#data-management-page .export-form-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

#data-management-page .export-form-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#data-management-page .export-form-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    padding-bottom: 1rem;
}

/* 滚动条样式 */
#data-management-page .export-form-scroll::-webkit-scrollbar {
    width: 8px;
}

#data-management-page .export-form-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

#data-management-page .export-form-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.5);
    border-radius: 4px;
}

#data-management-page .export-form-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.7);
}

#data-management-page .export-form-footer {
    padding: 1rem 1.5rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#data-management-page .export-form-footer .btn {
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
    transition: all 0.3s ease;
}

#data-management-page .export-form-footer .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 212, 255, 0.5);
}

/* 导入页签右侧列自适应高度布局 */
#data-management-page #import-content .col-md-6:last-child {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 220px);
    min-height: 500px;
}

/* 导入进度卡片 */
#data-management-page #import-content .col-md-6:last-child .card.mb-3 {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#data-management-page #import-content .col-md-6:last-child .card.mb-3 .card-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* 导入日志卡片固定高度 */
#data-management-page #import-content .col-md-6:last-child .card:not(.mb-3) {
    flex-shrink: 0;
}

/* 导入进度卡片滚动条样式 */
#data-management-page #import-content .col-md-6:last-child .card.mb-3 .card-body::-webkit-scrollbar {
    width: 8px;
}

#data-management-page #import-content .col-md-6:last-child .card.mb-3 .card-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

#data-management-page #import-content .col-md-6:last-child .card.mb-3 .card-body::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.5);
    border-radius: 4px;
}

#data-management-page #import-content .col-md-6:last-child .card.mb-3 .card-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.7);
}

/* ═══════════════════ 轨道管理页面样式（深色主题） ═══════════════════ */
#rail-management-page {
    padding: 20px;
}

/* --- 卡片 --- */
#rail-management-page .card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

#rail-management-page .card-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #00d4ff;
    font-weight: 600;
}

#rail-management-page .card-body {
    background: rgba(255, 255, 255, 0.03);
    color: #e8eaed;
}

#rail-management-page .card-footer {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
    border-top: 1px solid rgba(0, 212, 255, 0.3);
    color: #e8eaed;
}

/* --- Tab导航 --- */
#rail-management-page .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

#rail-management-page .nav-tabs .nav-link {
    color: #a0c4e8;
    border: none;
    border-bottom: 2px solid transparent;
}

#rail-management-page .nav-tabs .nav-link:hover {
    color: #00d4ff;
    border-bottom-color: rgba(0, 212, 255, 0.3);
}

#rail-management-page .nav-tabs .nav-link.active {
    color: #00d4ff;
    background: transparent;
    border-bottom-color: #00d4ff;
}

/* --- 表单控件 --- */
#rail-management-page .form-label {
    color: #a0c4e8;
    font-weight: 500;
}

#rail-management-page .form-control,
#rail-management-page .form-select {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e8eaed;
}

#rail-management-page .form-control:focus,
#rail-management-page .form-select:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #00d4ff;
    color: #e8eaed;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
}

#rail-management-page .form-control::placeholder {
    color: rgba(232, 234, 237, 0.5);
}

#rail-management-page .form-select option {
    background: #1a2332;
    color: #e8eaed;
}

#rail-management-page .form-check-input {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

#rail-management-page .form-check-input:checked {
    background-color: #00d4ff;
    border-color: #00d4ff;
}

#rail-management-page .form-check-label {
    color: #e8eaed;
}

#rail-management-page .form-text {
    color: #8ec8e8 !important;
}

/* --- 表格 --- */
#rail-management-page .table {
    color: #e8eaed;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(0, 212, 255, 0.08);
}

#rail-management-page .table thead th {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 168, 204, 0.1) 100%) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
    color: #00d4ff !important;
    font-weight: 600;
}

#rail-management-page .table tbody td {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #d0dce8 !important;
}

#rail-management-page .table tbody tr:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(0, 212, 255, 0.05) 100%) !important;
}

#rail-management-page .table-light {
    background: transparent !important;
    color: inherit !important;
}

/* --- 分页 --- */
#rail-management-page .pagination {
    margin: 0;
}

#rail-management-page .pagination .page-link {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #00d4ff;
}

#rail-management-page .pagination .page-link:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: rgba(0, 212, 255, 0.4);
    color: #ffffff;
}

#rail-management-page .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border-color: #00d4ff;
    color: #000;
    font-weight: 600;
}

#rail-management-page .pagination .page-item.disabled .page-link {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
}

/* --- Badge --- */
#rail-management-page .badge {
    font-weight: 500;
}

#rail-management-page .badge.bg-success {
    background-color: #00ff88 !important;
    color: #000;
}

#rail-management-page .badge.bg-danger {
    background-color: #ff4444 !important;
}

#rail-management-page .badge.bg-warning {
    background-color: #ffaa00 !important;
    color: #000;
}

#rail-management-page .badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #a0c4e8;
}

/* --- 按钮 --- */
#rail-management-page .btn-primary {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

#rail-management-page .btn-primary:hover {
    background: linear-gradient(135deg, #00e5ff, #00aadd);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.5);
}

#rail-management-page .btn-outline-primary {
    border-color: rgba(0, 212, 255, 0.5);
    color: #00d4ff;
}

#rail-management-page .btn-outline-primary:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: #00d4ff;
    color: #00d4ff;
}

#rail-management-page .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.3);
    color: #e8eaed;
}

#rail-management-page .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

#rail-management-page .btn-outline-danger {
    border-color: rgba(255, 68, 68, 0.5);
    color: #ff6666;
}

#rail-management-page .btn-outline-danger:hover {
    background: rgba(255, 68, 68, 0.15);
    border-color: #ff4444;
    color: #ff4444;
}

#rail-management-page .btn-success {
    background: linear-gradient(135deg, #00ff88, #00cc66);
    border: none;
    color: #000;
    box-shadow: 0 2px 8px rgba(0, 255, 136, 0.3);
}

#rail-management-page .btn-success:hover {
    background: linear-gradient(135deg, #33ffaa, #00dd77);
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.5);
    color: #000;
}

#rail-management-page .btn-warning {
    background: linear-gradient(135deg, #ffaa00, #cc8800);
    border: none;
    color: #000;
    box-shadow: 0 2px 8px rgba(255, 170, 0, 0.3);
}

#rail-management-page .btn-warning:hover {
    background: linear-gradient(135deg, #ffbb33, #dd9900);
    box-shadow: 0 4px 12px rgba(255, 170, 0, 0.5);
    color: #000;
}

/* --- 批量添加折叠卡片（border-warning） --- */
#rail-management-page .card.border-warning {
    border-color: rgba(255, 170, 0, 0.4) !important;
}

/* --- 页面标题 --- */
#rail-management-page h4 {
    color: #e8eaed;
}

/* --- 右侧表单卡片自适应高度 --- */
#rail-management-page .rail-form-card {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 220px);
    min-height: 500px;
}

#rail-management-page .rail-form-card .rail-form-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

#rail-management-page .rail-form-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* --- 滚动条样式 --- */
#rail-management-page .rail-form-scroll::-webkit-scrollbar {
    width: 8px;
}

#rail-management-page .rail-form-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

#rail-management-page .rail-form-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.5);
    border-radius: 4px;
}

#rail-management-page .rail-form-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.7);
}

#rail-management-page .table-responsive::-webkit-scrollbar {
    width: 8px;
}

#rail-management-page .table-responsive::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

#rail-management-page .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.5);
    border-radius: 4px;
}

#rail-management-page .table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.7);
}

/* --- 分隔线 --- */
#rail-management-page hr {
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

/* --- CameraPreview 组件样式（页面内） --- */
#rail-management-page .camera-preview-toolbar .form-select {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e8eaed;
}

#rail-management-page .camera-preview-toolbar .form-select option {
    background: #1a2332;
    color: #e8eaed;
}

#rail-management-page .camera-preview-toolbar .form-select:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
}

/* --- CameraPreview 组件样式（编辑模态框内） --- */
#rail-edit-modal .camera-preview-toolbar .form-select {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e8eaed;
}

#rail-edit-modal .camera-preview-toolbar .form-select option {
    background: #1a2332;
    color: #e8eaed;
}

#rail-edit-modal .camera-preview-toolbar .form-select:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
}

#rail-edit-modal .camera-preview-area {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ═══════════════════ 统一模态框深色主题 ═══════════════════ */
#analog-connection-modal .modal-content,
#analog-channel-modal .modal-content,
#dio-connection-modal .modal-content,
#dio-channel-modal .modal-content,
#modbus-connection-modal .modal-content,
#modbus-field-modal .modal-content,
#s7-connection-modal .modal-content,
#s7-field-modal .modal-content,
#middleware-config-modal .modal-content,
#rail-edit-modal .modal-content {
    background: linear-gradient(to bottom, #0f1419, #1a2332);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e8eaed;
}

#analog-connection-modal .modal-header,
#analog-channel-modal .modal-header,
#dio-connection-modal .modal-header,
#dio-channel-modal .modal-header,
#modbus-connection-modal .modal-header,
#modbus-field-modal .modal-header,
#s7-connection-modal .modal-header,
#s7-field-modal .modal-header,
#middleware-config-modal .modal-header,
#rail-edit-modal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 212, 255, 0.08);
}

#analog-connection-modal .modal-header .modal-title,
#analog-channel-modal .modal-header .modal-title,
#dio-connection-modal .modal-header .modal-title,
#dio-channel-modal .modal-header .modal-title,
#modbus-connection-modal .modal-header .modal-title,
#modbus-field-modal .modal-header .modal-title,
#s7-connection-modal .modal-header .modal-title,
#s7-field-modal .modal-header .modal-title,
#middleware-config-modal .modal-header .modal-title,
#rail-edit-modal .modal-header .modal-title {
    color: #00d4ff;
    font-weight: 600;
}

#analog-connection-modal .modal-header .btn-close,
#analog-channel-modal .modal-header .btn-close,
#dio-connection-modal .modal-header .btn-close,
#dio-channel-modal .modal-header .btn-close,
#modbus-connection-modal .modal-header .btn-close,
#modbus-field-modal .modal-header .btn-close,
#s7-connection-modal .modal-header .btn-close,
#s7-field-modal .modal-header .btn-close,
#middleware-config-modal .modal-header .btn-close,
#rail-edit-modal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

#analog-connection-modal .modal-footer,
#analog-channel-modal .modal-footer,
#dio-connection-modal .modal-footer,
#dio-channel-modal .modal-footer,
#modbus-connection-modal .modal-footer,
#modbus-field-modal .modal-footer,
#s7-connection-modal .modal-footer,
#s7-field-modal .modal-footer,
#middleware-config-modal .modal-footer,
#rail-edit-modal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#analog-connection-modal .form-control,
#analog-connection-modal .form-select,
#analog-channel-modal .form-control,
#analog-channel-modal .form-select,
#dio-connection-modal .form-control,
#dio-connection-modal .form-select,
#dio-channel-modal .form-control,
#dio-channel-modal .form-select,
#modbus-connection-modal .form-control,
#modbus-connection-modal .form-select,
#s7-connection-modal .form-control,
#s7-connection-modal .form-select,
#s7-field-modal .form-control,
#s7-field-modal .form-select,
#middleware-config-modal .form-control,
#rail-edit-modal .form-control,
#middleware-config-modal .form-select,
#rail-edit-modal .form-select {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e8eaed;
}

#analog-connection-modal .form-select option,
#analog-channel-modal .form-select option,
#dio-connection-modal .form-select option,
#dio-channel-modal .form-select option,
#modbus-connection-modal .form-select option,
#s7-connection-modal .form-select option,
#s7-field-modal .form-select option,
#middleware-config-modal .form-select option,
#rail-edit-modal .form-select option {
    background: #1a2332;
    color: #e8eaed;
}

#analog-connection-modal .form-control:focus,
#analog-connection-modal .form-select:focus,
#analog-channel-modal .form-control:focus,
#analog-channel-modal .form-select:focus,
#dio-connection-modal .form-control:focus,
#dio-connection-modal .form-select:focus,
#dio-channel-modal .form-control:focus,
#dio-channel-modal .form-select:focus,
#modbus-connection-modal .form-control:focus,
#modbus-connection-modal .form-select:focus,
#s7-connection-modal .form-control:focus,
#s7-connection-modal .form-select:focus,
#s7-field-modal .form-control:focus,
#s7-field-modal .form-select:focus,
#middleware-config-modal .form-control:focus,
#rail-edit-modal .form-control:focus,
#middleware-config-modal .form-select:focus,
#rail-edit-modal .form-select:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #00d4ff;
    color: #e8eaed;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
}

#analog-connection-modal .form-label,
#analog-channel-modal .form-label,
#dio-connection-modal .form-label,
#dio-channel-modal .form-label,
#modbus-connection-modal .form-label,
#s7-connection-modal .form-label,
#s7-field-modal .form-label,
#middleware-config-modal .form-label,
#rail-edit-modal .form-label {
    color: #e8eaed;
}

#analog-connection-modal .form-text,
#analog-channel-modal .form-text,
#dio-connection-modal .form-text,
#dio-channel-modal .form-text,
#modbus-connection-modal .form-text,
#s7-connection-modal .form-text,
#s7-field-modal .form-text,
#middleware-config-modal .form-text,
#rail-edit-modal .form-text {
    color: rgba(232, 234, 237, 0.5);
}

#analog-connection-modal .form-check-label,
#analog-channel-modal .form-check-label,
#dio-connection-modal .form-check-label,
#dio-channel-modal .form-check-label,
#modbus-connection-modal .form-check-label,
#s7-connection-modal .form-check-label,
#s7-field-modal .form-check-label,
#middleware-config-modal .form-check-label,
#rail-edit-modal .form-check-label {
    color: #e8eaed;
}

#middleware-config-modal .form-check-input,
#rail-edit-modal .form-check-input {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

#middleware-config-modal .form-check-input:checked,
#rail-edit-modal .form-check-input:checked {
    background-color: #00d4ff;
    border-color: #00d4ff;
}

#middleware-config-modal .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e8eaed;
}

#middleware-config-modal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

#middleware-config-modal .btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e8eaed;
}

#middleware-config-modal .btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

#rail-edit-modal .btn-primary {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

#rail-edit-modal .btn-primary:hover {
    background: linear-gradient(135deg, #00e5ff, #00aadd);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.5);
}

#analog-connection-modal h6,
#analog-channel-modal h6,
#dio-connection-modal h6,
#dio-channel-modal h6,
#modbus-connection-modal h6,
#s7-connection-modal h6,
#s7-field-modal h6,
#middleware-config-modal h6,
#rail-edit-modal h6 {
    color: #00d4ff;
}

#analog-connection-modal hr,
#analog-channel-modal hr,
#dio-connection-modal hr,
#dio-channel-modal hr,
#modbus-connection-modal hr,
#s7-connection-modal hr,
#s7-field-modal hr,
#middleware-config-modal hr,
#rail-edit-modal hr {
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

/* ═══════════════════ 报表管理页面样式（深色主题） ═══════════════════ */
#report-management-page {
    padding: 20px;
}

/* --- 卡片 --- */
#report-management-page .card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

#report-management-page .card-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #00d4ff;
    font-weight: 600;
}

#report-management-page .card-body {
    background: rgba(255, 255, 255, 0.03);
    color: #e8eaed;
}

#report-management-page .card-footer {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
    border-top: 1px solid rgba(0, 212, 255, 0.3);
    color: #e8eaed;
}

/* --- Tab导航 --- */
#report-management-page .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

#report-management-page .nav-tabs .nav-link {
    color: #a0c4e8;
    border: none;
    border-bottom: 2px solid transparent;
}

#report-management-page .nav-tabs .nav-link:hover {
    color: #00d4ff;
    border-bottom-color: rgba(0, 212, 255, 0.3);
}

#report-management-page .nav-tabs .nav-link.active {
    color: #00d4ff;
    background: transparent;
    border-bottom-color: #00d4ff;
}

/* --- 表单控件 --- */
#report-management-page .form-label {
    color: #a0c4e8;
    font-weight: 500;
}

#report-management-page .form-control,
#report-management-page .form-select {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e8eaed;
}

#report-management-page .form-control:focus,
#report-management-page .form-select:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #00d4ff;
    color: #e8eaed;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
}

#report-management-page .form-control::placeholder {
    color: rgba(232, 234, 237, 0.5);
}

#report-management-page .form-select option {
    background: #1a2332;
    color: #e8eaed;
}

#report-management-page textarea.form-control {
    resize: vertical;
}

/* --- 表格 --- */
#report-management-page .table {
    color: #e8eaed;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(0, 212, 255, 0.08);
}

#report-management-page .table thead th {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 168, 204, 0.1) 100%) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
    color: #00d4ff !important;
    font-weight: 600;
}

#report-management-page .table tbody td {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #d0dce8 !important;
}

#report-management-page .table tbody tr:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(0, 212, 255, 0.05) 100%) !important;
}

#report-management-page .table-light {
    background: transparent !important;
    color: inherit !important;
}

/* --- 分页 --- */
#report-management-page .pagination {
    margin: 0;
}

#report-management-page .pagination .page-link {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #00d4ff;
}

#report-management-page .pagination .page-link:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: rgba(0, 212, 255, 0.4);
    color: #ffffff;
}

#report-management-page .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border-color: #00d4ff;
    color: #000;
    font-weight: 600;
}

#report-management-page .pagination .page-item.disabled .page-link {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
}

/* --- Badge --- */
#report-management-page .badge {
    font-weight: 500;
}

#report-management-page .badge.bg-success {
    background-color: #00ff88 !important;
    color: #000;
}

#report-management-page .badge.bg-danger {
    background-color: #ff4444 !important;
}

#report-management-page .badge.bg-warning {
    background-color: #ffaa00 !important;
    color: #000;
}

#report-management-page .badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #a0c4e8;
}

/* --- 按钮 --- */
#report-management-page .btn-primary {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

#report-management-page .btn-primary:hover {
    background: linear-gradient(135deg, #00e5ff, #00aadd);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.5);
}

#report-management-page .btn-outline-primary {
    border-color: rgba(0, 212, 255, 0.5);
    color: #00d4ff;
}

#report-management-page .btn-outline-primary:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: #00d4ff;
    color: #00d4ff;
}

#report-management-page .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.3);
    color: #e8eaed;
}

#report-management-page .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

#report-management-page .btn-outline-danger {
    border-color: rgba(255, 68, 68, 0.5);
    color: #ff6666;
}

#report-management-page .btn-outline-danger:hover {
    background: rgba(255, 68, 68, 0.15);
    border-color: #ff4444;
    color: #ff4444;
}

#report-management-page .btn-success {
    background: linear-gradient(135deg, #00ff88, #00cc66);
    border: none;
    color: #000;
    box-shadow: 0 2px 8px rgba(0, 255, 136, 0.3);
}

#report-management-page .btn-success:hover {
    background: linear-gradient(135deg, #33ffaa, #00dd77);
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.5);
    color: #000;
}

#report-management-page .btn-warning {
    background: linear-gradient(135deg, #ffaa00, #cc8800);
    border: none;
    color: #000;
    box-shadow: 0 2px 8px rgba(255, 170, 0, 0.3);
}

#report-management-page .btn-warning:hover {
    background: linear-gradient(135deg, #ffbb33, #dd9900);
    box-shadow: 0 4px 12px rgba(255, 170, 0, 0.5);
    color: #000;
}

/* --- 页面标题 --- */
#report-management-page h4 {
    color: #e8eaed;
}

/* --- 分隔线 --- */
#report-management-page hr {
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

/* --- 进度条 --- */
#report-management-page .progress {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

#report-management-page .progress-bar {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
}

/* --- Alert --- */
#report-management-page .alert-success {
    background: rgba(0, 255, 136, 0.15);
    border-color: rgba(0, 255, 136, 0.3);
    color: #00ff88;
}

/* --- 统计卡片（预览区域） --- */
#report-management-page .report-stat-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px 10px;
    text-align: center;
    transition: all 0.3s ease;
}

#report-management-page .report-stat-card:hover {
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateY(-2px);
}

#report-management-page .report-stat-card .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #00d4ff;
    line-height: 1.2;
}

#report-management-page .report-stat-card .stat-label {
    font-size: 0.8rem;
    color: #a0c4e8;
    margin-top: 4px;
}

/* --- 滚动条 --- */
#report-management-page .table-responsive::-webkit-scrollbar,
#report-management-page #report-preview-content::-webkit-scrollbar {
    width: 8px;
}

#report-management-page .table-responsive::-webkit-scrollbar-track,
#report-management-page #report-preview-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

#report-management-page .table-responsive::-webkit-scrollbar-thumb,
#report-management-page #report-preview-content::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.5);
    border-radius: 4px;
}

#report-management-page .table-responsive::-webkit-scrollbar-thumb:hover,
#report-management-page #report-preview-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.7);
}