@import '_content/M.Web.Shared/M.Web.Shared.azds4o90v0.bundle.scp.css';

/* /Components/Admin/DbSchemaCompare.razor.rz.scp.css */
.db-schema-page[b-zwdfnx8lg5] {
    gap: 8px;
}

.page-toolbar[b-zwdfnx8lg5] {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.toolbar-left[b-zwdfnx8lg5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.schema-match-list[b-zwdfnx8lg5] {
    width: 50%;
    border-right: 1px solid #ececec;
}

.schema-match-detail[b-zwdfnx8lg5] {
    padding: 0 8px;
}

.section-title[b-zwdfnx8lg5] {
    padding: 8px;
    font-weight: 600;
    border-bottom: 1px solid #ececec;
    background: #f8fafc;
}

.detail-block[b-zwdfnx8lg5] {
    padding: 8px 0;
}

.detail-title[b-zwdfnx8lg5] {
    margin-bottom: 8px;
    font-weight: 600;
}

.match-summary[b-zwdfnx8lg5] {
    border-bottom: 1px dashed #d1d5db;
}

.match-badge[b-zwdfnx8lg5] {
    display: inline-block;
    min-width: 70px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 12px;
}

.match-ok[b-zwdfnx8lg5] {
    color: #14532d;
    background: #dcfce7;
}

.match-warn[b-zwdfnx8lg5] {
    color: #92400e;
    background: #fef3c7;
}

.match-bad[b-zwdfnx8lg5] {
    color: #991b1b;
    background: #fee2e2;
}

.tag-ok[b-zwdfnx8lg5] {
    color: #166534;
}

.tag-bad[b-zwdfnx8lg5] {
    color: #b91c1c;
}

.table-link[b-zwdfnx8lg5] {
    color: #0d6efd;
    text-decoration: underline;
    cursor: pointer;
}
/* /Components/Admin/UserList.razor.rz.scp.css */
[b-g21js77gjw] .checkbox-list .checkbox-item {
    width: 190px;
}

    [b-g21js77gjw] .checkbox-list .checkbox-item .form-check {
        width: 190px;
    }

[b-g21js77gjw] .tabs{
    height: auto;
}

[b-g21js77gjw] .tabs-body {
    height: auto;
}

[b-g21js77gjw] .tabs-body-content {
    height: auto;
}
/* /Components/Analysis/DeviceAnalysis.razor.rz.scp.css */



.analysis-dashboard[b-1s7ff4oom1] {
    width: 100%;
    min-width: 1600px;
    height: 100vh;
    background: linear-gradient(135deg, #0a1628 0%, #1a2a45 100%);
    overflow: hidden; /* 改为 hidden，防止滚动条出现 */
    position: relative;
}

/* 独立模式样式 - 保持深色背景，但在通用内容区域显示 */
.analysis-dashboard.standalone-mode[b-1s7ff4oom1] {
    height: auto; /* 适应内容高度 */
    min-height: calc(100vh - 60px); /* 减去顶部导航的高度 */
    background: linear-gradient(135deg, #0a1628 0%, #1a2a45 100%); /* 保持深色背景 */
}

.analysis-dashboard.standalone-mode .analysis-content[b-1s7ff4oom1] {
    height: auto; /* 自适应高度 */
    min-height: calc(100vh - 80px);
    padding: 20px;
}

.navbar[b-1s7ff4oom1] {
    height: 80px;
    background: linear-gradient(135deg, rgba(16, 26, 53, 0.95), rgba(24, 39, 75, 0.95));
    border-bottom: 2px solid rgba(0, 193, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    flex-shrink: 0; /* 防止压缩 */
}

.menu-left[b-1s7ff4oom1] {
    display: flex;
    gap: 10px;
    z-index: 10;
}

.menu-btn[b-1s7ff4oom1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(0, 193, 255, 0.1);
    border: 1px solid rgba(0, 193, 255, 0.3);
    border-radius: 8px;
    color: #00c1ff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.menu-btn:hover[b-1s7ff4oom1] {
    background: rgba(0, 193, 255, 0.2);
    border-color: rgba(0, 193, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 193, 255, 0.3);
}

.menu-btn.active[b-1s7ff4oom1] {
    background: linear-gradient(135deg, rgba(0, 193, 255, 0.3), rgba(0, 212, 154, 0.3));
    border-color: #00c1ff;
    box-shadow: 0 0 20px rgba(0, 193, 255, 0.5);
}

.menu-btn i[b-1s7ff4oom1] {
    font-size: 20px;
}

.system-title-container[b-1s7ff4oom1] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
}

.system-title[b-1s7ff4oom1] {
    font-size: 28px;
    font-weight: bold;
    background: linear-gradient(135deg, #00c1ff, #00d49a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 4px;
    white-space: nowrap;
}

.system-subtitle[b-1s7ff4oom1] {
    font-size: 12px;
    color: rgba(0, 193, 255, 0.7);
    letter-spacing: 2px;
    margin-top: 5px;
    white-space: nowrap;
}

.navbar-right[b-1s7ff4oom1] {
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
}

.datetime[b-1s7ff4oom1] {
    text-align: right;
}

.time[b-1s7ff4oom1] {
    font-size: 24px;
    font-weight: bold;
    color: #00c1ff;
    font-family: 'Consolas', monospace;
}

.date[b-1s7ff4oom1] {
    font-size: 12px;
    color: rgba(0, 193, 255, 0.7);
    margin-top: 2px;
}

.analysis-content[b-1s7ff4oom1] {
    padding: 20px;
    max-width: 1920px;
    margin: 0 auto;
    height: calc(100vh - 80px); /* 减去导航栏高度 */
    overflow-y: auto; /* 只在内容区域滚动 */
    overflow-x: hidden;
}

/* 自定义滚动条样式 */
.analysis-content[b-1s7ff4oom1]::-webkit-scrollbar {
    width: 8px;
}

.analysis-content[b-1s7ff4oom1]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.analysis-content[b-1s7ff4oom1]::-webkit-scrollbar-thumb {
    background: rgba(0, 193, 255, 0.3);
    border-radius: 4px;
}

.analysis-content[b-1s7ff4oom1]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 193, 255, 0.5);
}

.metrics-row[b-1s7ff4oom1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.metric-card[b-1s7ff4oom1] {
    position: relative;
    background: rgba(16, 26, 53, 0.8);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(0, 193, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    overflow: hidden; /* 防止伪元素溢出 */
}

.metric-card:hover[b-1s7ff4oom1] {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.metric-icon[b-1s7ff4oom1] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0; /* 防止压缩 */
}

.metric-card.blue .metric-icon[b-1s7ff4oom1] {
    background: linear-gradient(135deg, rgba(0, 193, 255, 0.3), rgba(0, 193, 255, 0.1));
    color: #00c1ff;
    box-shadow: 0 0 20px rgba(0, 193, 255, 0.3);
}

.metric-card.green .metric-icon[b-1s7ff4oom1] {
    background: linear-gradient(135deg, rgba(0, 212, 154, 0.3), rgba(0, 212, 154, 0.1));
    color: #00d49a;
    box-shadow: 0 0 20px rgba(0, 212, 154, 0.3);
}

.metric-card.orange .metric-icon[b-1s7ff4oom1] {
    background: linear-gradient(135deg, rgba(255, 170, 51, 0.3), rgba(255, 170, 51, 0.1));
    color: #ffaa33;
    box-shadow: 0 0 20px rgba(255, 170, 51, 0.3);
}

.metric-card.red .metric-icon[b-1s7ff4oom1] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.3), rgba(255, 71, 87, 0.1));
    color: #ff4757;
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
}

.metric-info[b-1s7ff4oom1] {
    flex: 1;
    min-width: 0; /* 防止文本溢出 */
}

.metric-label[b-1s7ff4oom1] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 5px;
}

.metric-value[b-1s7ff4oom1] {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    font-family: 'Consolas', monospace;
    margin-bottom: 5px;
}

.metric-trend[b-1s7ff4oom1] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.trend-up[b-1s7ff4oom1] {
    color: #00d49a;
}

.trend-down[b-1s7ff4oom1] {
    color: #ff4757;
}

/* 图表行 */
.charts-row[b-1s7ff4oom1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.chart-panel[b-1s7ff4oom1] {
    background: rgba(16, 26, 53, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(0, 193, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: fadeInUp-b-1s7ff4oom1 0.6s ease-out;
    transition: all 0.3s ease;
}

.chart-panel:hover[b-1s7ff4oom1] {
    box-shadow: 0 8px 32px rgba(0, 193, 255, 0.3),
                0 0 60px rgba(0, 193, 255, 0.1);
    transform: translateY(-2px);
    border-color: rgba(0, 193, 255, 0.4);
}

/* 面板进入动画 */
@keyframes fadeInUp-b-1s7ff4oom1 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 为不同位置的图表添加延迟动画 */
.charts-row:nth-child(2) .chart-panel:nth-child(1)[b-1s7ff4oom1] {
    animation-delay: 0.1s;
    animation-fill-mode: both; /* 保持初始状态 */
}

.charts-row:nth-child(2) .chart-panel:nth-child(2)[b-1s7ff4oom1] {
    animation-delay: 0.2s;
    animation-fill-mode: both;
}

.charts-row:nth-child(3) .chart-panel:nth-child(1)[b-1s7ff4oom1] {
    animation-delay: 0.3s;
    animation-fill-mode: both;
}

.charts-row:nth-child(3) .chart-panel:nth-child(2)[b-1s7ff4oom1] {
    animation-delay: 0.4s;
    animation-fill-mode: both;
}

.panel-header[b-1s7ff4oom1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: rgba(0, 193, 255, 0.1);
    border-bottom: 1px solid rgba(0, 193, 255, 0.2);
    color: #00c1ff;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.panel-header i[b-1s7ff4oom1] {
    font-size: 24px;
    animation: iconPulse-b-1s7ff4oom1 2s ease-in-out infinite;
}

/* 图标脉冲动画 */
@keyframes iconPulse-b-1s7ff4oom1 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* 面板标题光泽动画 */
.panel-header[b-1s7ff4oom1]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 193, 255, 0.3),
        transparent
    );
    animation: shine-b-1s7ff4oom1 3s infinite;
}

@keyframes shine-b-1s7ff4oom1 {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

.panel-body[b-1s7ff4oom1] {
    padding: 20px;
}

.chart[b-1s7ff4oom1] {
    width: 100%;
    height: 350px;
}

.chart-large[b-1s7ff4oom1] {
    width: 100%;
    height: 400px;
}

/* 指标卡片动画 */
.metrics-row .metric-card:nth-child(1)[b-1s7ff4oom1] {
    animation: fadeInUp-b-1s7ff4oom1 0.5s ease-out;
}

.metrics-row .metric-card:nth-child(2)[b-1s7ff4oom1] {
    animation: fadeInUp-b-1s7ff4oom1 0.5s ease-out 0.1s;
    animation-fill-mode: both;
}

.metrics-row .metric-card:nth-child(3)[b-1s7ff4oom1] {
    animation: fadeInUp-b-1s7ff4oom1 0.5s ease-out 0.2s;
    animation-fill-mode: both;
}

.metrics-row .metric-card:nth-child(4)[b-1s7ff4oom1] {
    animation: fadeInUp-b-1s7ff4oom1 0.5s ease-out 0.3s;
    animation-fill-mode: both;
}

/* 待修设备卡片警告闪烁 */
.metric-card.red .metric-icon[b-1s7ff4oom1] {
    animation: warningBlink-b-1s7ff4oom1 2s ease-in-out infinite;
}

@keyframes warningBlink-b-1s7ff4oom1 {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 30px rgba(255, 71, 87, 0.6);
    }
}

/* 待检设备卡片警告脉冲 */
.metric-card.orange .metric-icon[b-1s7ff4oom1] {
    animation: warningPulse-b-1s7ff4oom1 2.5s ease-in-out infinite;
}

@keyframes warningPulse-b-1s7ff4oom1 {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(255, 170, 51, 0.3);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 25px rgba(255, 170, 51, 0.5);
    }
}

/* 指标卡片悬停效果 */
.metric-card:hover .metric-value[b-1s7ff4oom1] {
    animation: valueBounce-b-1s7ff4oom1 0.6s ease-out;
}

@keyframes valueBounce-b-1s7ff4oom1 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05); /* 减小缩放比例，从 1.1 改为 1.05 */
    }
}

/* 趋势指示器动画 */
.trend-up[b-1s7ff4oom1] {
    animation: bounceUp-b-1s7ff4oom1 1s ease-out;
}

.trend-down[b-1s7ff4oom1] {
    animation: bounceDown-b-1s7ff4oom1 1s ease-out;
}

@keyframes bounceUp-b-1s7ff4oom1 {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }
    60% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounceDown-b-1s7ff4oom1 {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    60% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 健康率高亮效果 */
.metric-card.green:hover[b-1s7ff4oom1] {
    box-shadow: 0 8px 24px rgba(0, 212, 154, 0.4),
                0 0 60px rgba(0, 212, 154, 0.2);
}

.metric-card.red:hover[b-1s7ff4oom1] {
    box-shadow: 0 8px 24px rgba(255, 71, 87, 0.4),
                0 0 60px rgba(255, 71, 87, 0.2);
}

.metric-card.orange:hover[b-1s7ff4oom1] {
    box-shadow: 0 8px 24px rgba(255, 170, 51, 0.4),
                0 0 60px rgba(255, 170, 51, 0.2);
}

/* 加载状态 */
.chart-loading[b-1s7ff4oom1] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    color: #00c1ff;
    font-size: 16px;
}

.chart-loading[b-1s7ff4oom1]::after {
    content: '';
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border: 4px solid rgba(0, 193, 255, 0.2);
    border-top-color: #00c1ff;
    border-radius: 50%;
    animation: spin-b-1s7ff4oom1 1s linear infinite;
}

@keyframes spin-b-1s7ff4oom1 {
    to {
        transform: rotate(360deg);
    }
}

/* 数据卡片渐变背景动画 */
.metric-card[b-1s7ff4oom1]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(0, 193, 255, 0.1) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none; /* 防止阻挡鼠标事件 */
    z-index: 0;
}

.metric-card:hover[b-1s7ff4oom1]::before {
    opacity: 1;
    animation: rotate-b-1s7ff4oom1 10s linear infinite;
}

/* 确保内容在伪元素之上 */
.metric-card > *[b-1s7ff4oom1] {
    position: relative;
    z-index: 1;
}

@keyframes rotate-b-1s7ff4oom1 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 响应式优化 */
@media (max-width: 1600px) {
    .chart[b-1s7ff4oom1] {
        height: 300px;
    }
    
    .chart-large[b-1s7ff4oom1] {
        height: 350px;
    }
}

@media (max-width: 1400px) {
    .charts-row[b-1s7ff4oom1] {
        grid-template-columns: 1fr;
    }
    
    .chart[b-1s7ff4oom1] {
        height: 350px;
    }
    
    .chart-large[b-1s7ff4oom1] {
        height: 400px;
    }
}

/* 空状态样式 */
.empty-state[b-1s7ff4oom1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 350px;
    color: rgba(163, 177, 209, 0.6);
}

.empty-state i[b-1s7ff4oom1] {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.empty-state p[b-1s7ff4oom1] {
    font-size: 16px;
}

/* /Components/Analysis/PersonnelAnalysis.razor.rz.scp.css */
.analysis-dashboard[b-z2wnjku3vx] {
    width: 100%;
    min-width: 1600px;
    height: 100vh;
    background: linear-gradient(135deg, #0a1628 0%, #1a2a45 100%);
    overflow: hidden; /* 改为 hidden，防止滚动条出现 */
    position: relative;
}

/* 独立模式样式 - 保持深色背景，但在通用内容区域显示 */
.analysis-dashboard.standalone-mode[b-z2wnjku3vx] {
    height: auto; /* 适应内容高度 */
    min-height: calc(100vh - 60px); /* 减去顶部导航的高度 */
    background: linear-gradient(135deg, #0a1628 0%, #1a2a45 100%); /* 保持深色背景 */
}

.analysis-dashboard.standalone-mode .analysis-content[b-z2wnjku3vx] {
    height: auto; /* 自适应高度 */
    min-height: calc(100vh - 80px);
    padding: 20px;
}

.navbar[b-z2wnjku3vx] {
    height: 80px;
    background: linear-gradient(135deg, rgba(16, 26, 53, 0.95), rgba(24, 39, 75, 0.95));
    border-bottom: 2px solid rgba(0, 193, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    flex-shrink: 0; /* 防止压缩 */
}

.menu-left[b-z2wnjku3vx] {
    display: flex;
    gap: 10px;
    z-index: 10;
}

.menu-btn[b-z2wnjku3vx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(0, 193, 255, 0.1);
    border: 1px solid rgba(0, 193, 255, 0.3);
    border-radius: 8px;
    color: #00c1ff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.menu-btn:hover[b-z2wnjku3vx] {
    background: rgba(0, 193, 255, 0.2);
    border-color: rgba(0, 193, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 193, 255, 0.3);
}

.menu-btn.active[b-z2wnjku3vx] {
    background: linear-gradient(135deg, rgba(0, 193, 255, 0.3), rgba(0, 212, 154, 0.3));
    border-color: #00c1ff;
    box-shadow: 0 0 20px rgba(0, 193, 255, 0.5);
}

.menu-btn i[b-z2wnjku3vx] {
    font-size: 20px;
}

.system-title-container[b-z2wnjku3vx] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
}

.system-title[b-z2wnjku3vx] {
    font-size: 28px;
    font-weight: bold;
    background: linear-gradient(135deg, #00c1ff, #00d49a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 4px;
    white-space: nowrap;
}

.system-subtitle[b-z2wnjku3vx] {
    font-size: 12px;
    color: rgba(0, 193, 255, 0.7);
    letter-spacing: 2px;
    margin-top: 5px;
    white-space: nowrap;
}

.navbar-right[b-z2wnjku3vx] {
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
}

.datetime[b-z2wnjku3vx] {
    text-align: right;
}

.time[b-z2wnjku3vx] {
    font-size: 24px;
    font-weight: bold;
    color: #00c1ff;
    font-family: 'Consolas', monospace;
}

.date[b-z2wnjku3vx] {
    font-size: 12px;
    color: rgba(0, 193, 255, 0.7);
    margin-top: 2px;
}

.analysis-content[b-z2wnjku3vx] {
    padding: 20px;
    max-width: 1920px;
    margin: 0 auto;
    height: calc(100vh - 80px); /* 减去导航栏高度 */
    overflow-y: auto; /* 只在内容区域滚动 */
    overflow-x: hidden;
}

/* 自定义滚动条样式 */
.analysis-content[b-z2wnjku3vx]::-webkit-scrollbar {
    width: 8px;
}

.analysis-content[b-z2wnjku3vx]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.analysis-content[b-z2wnjku3vx]::-webkit-scrollbar-thumb {
    background: rgba(0, 193, 255, 0.3);
    border-radius: 4px;
}

.analysis-content[b-z2wnjku3vx]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 193, 255, 0.5);
}

.metrics-row[b-z2wnjku3vx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.metric-card[b-z2wnjku3vx] {
    position: relative;
    background: rgba(16, 26, 53, 0.8);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(0, 193, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    overflow: hidden; /* 防止伪元素溢出 */
}

.metric-card:hover[b-z2wnjku3vx] {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.metric-icon[b-z2wnjku3vx] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0; /* 防止压缩 */
}

.metric-card.blue .metric-icon[b-z2wnjku3vx] {
    background: linear-gradient(135deg, rgba(0, 193, 255, 0.3), rgba(0, 193, 255, 0.1));
    color: #00c1ff;
    box-shadow: 0 0 20px rgba(0, 193, 255, 0.3);
}

.metric-card.green .metric-icon[b-z2wnjku3vx] {
    background: linear-gradient(135deg, rgba(0, 212, 154, 0.3), rgba(0, 212, 154, 0.1));
    color: #00d49a;
    box-shadow: 0 0 20px rgba(0, 212, 154, 0.3);
}

.metric-card.orange .metric-icon[b-z2wnjku3vx] {
    background: linear-gradient(135deg, rgba(255, 170, 51, 0.3), rgba(255, 170, 51, 0.1));
    color: #ffaa33;
    box-shadow: 0 0 20px rgba(255, 170, 51, 0.3);
}

.metric-card.red .metric-icon[b-z2wnjku3vx] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.3), rgba(255, 71, 87, 0.1));
    color: #ff4757;
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
}

.metric-card.purple .metric-icon[b-z2wnjku3vx] {
    background: linear-gradient(135deg, rgba(156, 90, 255, 0.3), rgba(156, 90, 255, 0.1));
    color: #9c5aff;
    box-shadow: 0 0 20px rgba(156, 90, 255, 0.3);
}

.metric-info[b-z2wnjku3vx] {
    flex: 1;
    min-width: 0; /* 防止文本溢出 */
}

.metric-label[b-z2wnjku3vx] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 5px;
}

.metric-value[b-z2wnjku3vx] {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    font-family: 'Consolas', monospace;
    margin-bottom: 5px;
}

.metric-trend[b-z2wnjku3vx] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.trend-up[b-z2wnjku3vx] {
    color: #00d49a;
    font-weight: 600;
}

.trend-down[b-z2wnjku3vx] {
    color: #ff4757;
    font-weight: 600;
}

.trend-normal[b-z2wnjku3vx] {
    color: #a3b1d1;
    font-weight: 600;
}

/* 图表行 */
.charts-row[b-z2wnjku3vx] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.chart-panel[b-z2wnjku3vx] {
    background: rgba(16, 26, 53, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(0, 193, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: fadeInUp-b-z2wnjku3vx 0.6s ease-out;
    transition: all 0.3s ease;
}

.chart-panel:hover[b-z2wnjku3vx] {
    box-shadow: 0 8px 32px rgba(0, 193, 255, 0.3),
                0 0 60px rgba(0, 193, 255, 0.1);
    transform: translateY(-2px);
    border-color: rgba(0, 193, 255, 0.4);
}

/* 面板进入动画 */
@keyframes fadeInUp-b-z2wnjku3vx {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 为不同位置的图表添加延迟动画 */
.charts-row:nth-child(2) .chart-panel:nth-child(1)[b-z2wnjku3vx] {
    animation-delay: 0.1s;
    animation-fill-mode: both; /* 保持初始状态 */
}

.charts-row:nth-child(2) .chart-panel:nth-child(2)[b-z2wnjku3vx] {
    animation-delay: 0.2s;
    animation-fill-mode: both;
}

.charts-row:nth-child(3) .chart-panel:nth-child(1)[b-z2wnjku3vx] {
    animation-delay: 0.3s;
    animation-fill-mode: both;
}

.charts-row:nth-child(3) .chart-panel:nth-child(2)[b-z2wnjku3vx] {
    animation-delay: 0.4s;
    animation-fill-mode: both;
}

.panel-header[b-z2wnjku3vx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: rgba(0, 193, 255, 0.1);
    border-bottom: 1px solid rgba(0, 193, 255, 0.2);
    color: #00c1ff;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.panel-header i[b-z2wnjku3vx] {
    font-size: 24px;
    animation: iconPulse-b-z2wnjku3vx 2s ease-in-out infinite;
}

/* 图标脉冲动画 */
@keyframes iconPulse-b-z2wnjku3vx {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* 面板标题光泽动画 */
.panel-header[b-z2wnjku3vx]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 193, 255, 0.3),
        transparent
    );
    animation: shine-b-z2wnjku3vx 3s infinite;
}

@keyframes shine-b-z2wnjku3vx {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

.panel-body[b-z2wnjku3vx] {
    padding: 20px;
}

.chart[b-z2wnjku3vx] {
    width: 100%;
    height: 350px;
}

.chart-large[b-z2wnjku3vx] {
    width: 100%;
    height: 400px;
}

/* 指标卡片动画 */
.metrics-row .metric-card:nth-child(1)[b-z2wnjku3vx] {
    animation: fadeInUp-b-z2wnjku3vx 0.5s ease-out;
}

.metrics-row .metric-card:nth-child(2)[b-z2wnjku3vx] {
    animation: fadeInUp-b-z2wnjku3vx 0.5s ease-out 0.1s;
    animation-fill-mode: both;
}

.metrics-row .metric-card:nth-child(3)[b-z2wnjku3vx] {
    animation: fadeInUp-b-z2wnjku3vx 0.5s ease-out 0.2s;
    animation-fill-mode: both;
}

.metrics-row .metric-card:nth-child(4)[b-z2wnjku3vx] {
    animation: fadeInUp-b-z2wnjku3vx 0.5s ease-out 0.3s;
    animation-fill-mode: both;
}

/* 优秀人员卡片星光闪烁 */
.metric-card.purple .metric-icon[b-z2wnjku3vx] {
    animation: starShine-b-z2wnjku3vx 2s ease-in-out infinite;
}

@keyframes starShine-b-z2wnjku3vx {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(156, 90, 255, 0.3);
        transform: rotate(0deg);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 30px rgba(156, 90, 255, 0.6);
        transform: rotate(10deg);
    }
}

/* 执行任务中卡片脉冲 */
.metric-card.orange .metric-icon[b-z2wnjku3vx] {
    animation: taskPulse-b-z2wnjku3vx 2.5s ease-in-out infinite;
}

@keyframes taskPulse-b-z2wnjku3vx {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(255, 170, 51, 0.3);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 25px rgba(255, 170, 51, 0.5);
    }
}

/* 在岗人员卡片呼吸灯 */
.metric-card.green .metric-icon[b-z2wnjku3vx] {
    animation: breathe-b-z2wnjku3vx 3s ease-in-out infinite;
}

@keyframes breathe-b-z2wnjku3vx {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(0, 212, 154, 0.3);
    }
    50% {
        opacity: 0.85;
        box-shadow: 0 0 25px rgba(0, 212, 154, 0.5);
    }
}

/* 指标卡片悬停效果 */
.metric-card:hover .metric-value[b-z2wnjku3vx] {
    animation: valueBounce-b-z2wnjku3vx 0.6s ease-out;
}

@keyframes valueBounce-b-z2wnjku3vx {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05); /* 减小缩放比例，从 1.1 改为 1.05 */
    }
}

/* 趋势指示器动画 */
.trend-up[b-z2wnjku3vx] {
    animation: bounceUp-b-z2wnjku3vx 1s ease-out;
}

.trend-down[b-z2wnjku3vx] {
    animation: bounceDown-b-z2wnjku3vx 1s ease-out;
}

@keyframes bounceUp-b-z2wnjku3vx {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }
    60% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounceDown-b-z2wnjku3vx {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    60% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 各卡片特定悬停辉光 */
.metric-card.blue:hover[b-z2wnjku3vx] {
    box-shadow: 0 8px 24px rgba(0, 193, 255, 0.4),
                0 0 60px rgba(0, 193, 255, 0.2);
}

.metric-card.green:hover[b-z2wnjku3vx] {
    box-shadow: 0 8px 24px rgba(0, 212, 154, 0.4),
                0 0 60px rgba(0, 212, 154, 0.2);
}

.metric-card.orange:hover[b-z2wnjku3vx] {
    box-shadow: 0 8px 24px rgba(255, 170, 51, 0.4),
                0 0 60px rgba(255, 170, 51, 0.2);
}

.metric-card.purple:hover[b-z2wnjku3vx] {
    box-shadow: 0 8px 24px rgba(156, 90, 255, 0.4),
                0 0 60px rgba(156, 90, 255, 0.2);
}

/* 加载状态 */
.chart-loading[b-z2wnjku3vx] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    color: #00c1ff;
    font-size: 16px;
}

.chart-loading[b-z2wnjku3vx]::after {
    content: '';
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border: 4px solid rgba(0, 193, 255, 0.2);
    border-top-color: #00c1ff;
    border-radius: 50%;
    animation: spin-b-z2wnjku3vx 1s linear infinite;
}

@keyframes spin-b-z2wnjku3vx {
    to {
        transform: rotate(360deg);
    }
}

/* 数据卡片渐变背景动画 */
.metric-card[b-z2wnjku3vx]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(0, 193, 255, 0.1) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none; /* 防止阻挡鼠标事件 */
    z-index: 0;
}

.metric-card:hover[b-z2wnjku3vx]::before {
    opacity: 1;
    animation: rotate-b-z2wnjku3vx 10s linear infinite;
}

/* 确保内容在伪元素之上 */
.metric-card > *[b-z2wnjku3vx] {
    position: relative;
    z-index: 1;
}

@keyframes rotate-b-z2wnjku3vx {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 优秀徽章脉冲 */
.metric-card.purple .metric-value[b-z2wnjku3vx] {
    position: relative;
}

.metric-card.purple .metric-value[b-z2wnjku3vx]::after {
    content: '⭐';
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    animation: starBlink-b-z2wnjku3vx 1.5s ease-in-out infinite;
}

@keyframes starBlink-b-z2wnjku3vx {
    0%, 100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-50%) scale(1.2);
    }
}

/* 响应式优化 */
@media (max-width: 1600px) {
    .chart[b-z2wnjku3vx] {
        height: 300px;
    }
    
    .chart-large[b-z2wnjku3vx] {
        height: 350px;
    }
}

@media (max-width: 1400px) {
    .charts-row[b-z2wnjku3vx] {
        grid-template-columns: 1fr;
    }
    
    .chart[b-z2wnjku3vx] {
        height: 350px;
    }
    
    .chart-large[b-z2wnjku3vx] {
        height: 400px;
    }
}

/* 空状态样式 */
.empty-state[b-z2wnjku3vx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 350px;
    color: rgba(163, 177, 209, 0.6);
}

.empty-state i[b-z2wnjku3vx] {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.empty-state p[b-z2wnjku3vx] {
    font-size: 16px;
}

/* 效率等级徽章样式 */
.efficiency-badge[b-z2wnjku3vx] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    margin-left: 5px;
}

.efficiency-badge.s[b-z2wnjku3vx] {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.efficiency-badge.a[b-z2wnjku3vx] {
    background: linear-gradient(135deg, #00d49a, #00b87a);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 212, 154, 0.5);
}

.efficiency-badge.b[b-z2wnjku3vx] {
    background: linear-gradient(135deg, #00c1ff, #0099cc);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 193, 255, 0.5);
}

.efficiency-badge.c[b-z2wnjku3vx] {
    background: linear-gradient(135deg, #ffaa33, #ff8800);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 170, 51, 0.5);
}

.efficiency-badge.d[b-z2wnjku3vx] {
    background: linear-gradient(135deg, #ff4757, #ff3333);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.5);
}

/* /Components/Analysis/WorkOrderAnalysis.razor.rz.scp.css */
.analysis-dashboard[b-cke47ssmxk] {
    width: 100%;
    min-width: 1600px;
    height: 100vh;
    background: linear-gradient(135deg, #0a1628 0%, #1a2a45 100%);
    overflow: hidden; /* 改为 hidden，防止滚动条出现 */
    position: relative;
}

/* 独立模式样式 - 保持深色背景，但在通用内容区域显示 */
.analysis-dashboard.standalone-mode[b-cke47ssmxk] {
    height: auto; /* 适应内容高度 */
    min-height: calc(100vh - 60px); /* 减去顶部导航的高度 */
    background: linear-gradient(135deg, #0a1628 0%, #1a2a45 100%); /* 保持深色背景 */
}

.analysis-dashboard.standalone-mode .analysis-content[b-cke47ssmxk] {
    height: auto; /* 自适应高度 */
    min-height: calc(100vh - 80px);
    padding: 20px;
}

/* 导航栏样式 - 复用数据大屏样式 */
.navbar[b-cke47ssmxk] {
    height: 80px;
    background: linear-gradient(135deg, rgba(16, 26, 53, 0.95), rgba(24, 39, 75, 0.95));
    border-bottom: 2px solid rgba(0, 193, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    flex-shrink: 0; /* 防止压缩 */
}

.menu-left[b-cke47ssmxk] {
    display: flex;
    gap: 10px;
    z-index: 10;
}

.menu-btn[b-cke47ssmxk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(0, 193, 255, 0.1);
    border: 1px solid rgba(0, 193, 255, 0.3);
    border-radius: 8px;
    color: #00c1ff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.menu-btn:hover[b-cke47ssmxk] {
    background: rgba(0, 193, 255, 0.2);
    border-color: rgba(0, 193, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 193, 255, 0.3);
}

.menu-btn.active[b-cke47ssmxk] {
    background: linear-gradient(135deg, rgba(0, 193, 255, 0.3), rgba(0, 212, 154, 0.3));
    border-color: #00c1ff;
    box-shadow: 0 0 20px rgba(0, 193, 255, 0.5);
}

.menu-btn i[b-cke47ssmxk] {
    font-size: 20px;
}

.system-title-container[b-cke47ssmxk] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
}

.system-title[b-cke47ssmxk] {
    font-size: 28px;
    font-weight: bold;
    background: linear-gradient(135deg, #00c1ff, #00d49a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(0, 193, 255, 0.5);
    white-space: nowrap;
}

.system-subtitle[b-cke47ssmxk] {
    font-size: 12px;
    color: rgba(0, 193, 255, 0.7);
    letter-spacing: 2px;
    margin-top: 5px;
    white-space: nowrap;
}

.navbar-right[b-cke47ssmxk] {
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
}

.datetime[b-cke47ssmxk] {
    text-align: right;
}

.time[b-cke47ssmxk] {
    font-size: 24px;
    font-weight: bold;
    color: #00c1ff;
    font-family: 'Consolas', monospace;
}

.date[b-cke47ssmxk] {
    font-size: 12px;
    color: rgba(0, 193, 255, 0.7);
    margin-top: 2px;
}

/* 内容区域 */
.analysis-content[b-cke47ssmxk] {
    padding: 20px;
    max-width: 1920px;
    margin: 0 auto;
    height: calc(100vh - 80px); /* 减去导航栏高度 */
    overflow-y: auto; /* 只在内容区域滚动 */
    overflow-x: hidden;
}

/* 自定义滚动条样式 */
.analysis-content[b-cke47ssmxk]::-webkit-scrollbar {
    width: 8px;
}

.analysis-content[b-cke47ssmxk]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.analysis-content[b-cke47ssmxk]::-webkit-scrollbar-thumb {
    background: rgba(0, 193, 255, 0.3);
    border-radius: 4px;
}

.analysis-content[b-cke47ssmxk]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 193, 255, 0.5);
}

/* 指标卡片行 */
.metrics-row[b-cke47ssmxk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.metric-card[b-cke47ssmxk] {
    position: relative;
    background: rgba(16, 26, 53, 0.8);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(0, 193, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    overflow: hidden; /* 防止伪元素溢出 */
}

.metric-card:hover[b-cke47ssmxk] {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.metric-icon[b-cke47ssmxk] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0; /* 防止压缩 */
}

.metric-card.blue .metric-icon[b-cke47ssmxk] {
    background: linear-gradient(135deg, rgba(0, 193, 255, 0.3), rgba(0, 193, 255, 0.1));
    color: #00c1ff;
    box-shadow: 0 0 20px rgba(0, 193, 255, 0.3);
}

.metric-card.green .metric-icon[b-cke47ssmxk] {
    background: linear-gradient(135deg, rgba(0, 212, 154, 0.3), rgba(0, 212, 154, 0.1));
    color: #00d49a;
    box-shadow: 0 0 20px rgba(0, 212, 154, 0.3);
}

.metric-card.orange .metric-icon[b-cke47ssmxk] {
    background: linear-gradient(135deg, rgba(255, 170, 51, 0.3), rgba(255, 170, 51, 0.1));
    color: #ffaa33;
    box-shadow: 0 0 20px rgba(255, 170, 51, 0.3);
}

.metric-card.red .metric-icon[b-cke47ssmxk] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.3), rgba(255, 71, 87, 0.1));
    color: #ff4757;
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
}

.metric-info[b-cke47ssmxk] {
    flex: 1;
    min-width: 0; /* 防止文本溢出 */
}

.metric-label[b-cke47ssmxk] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 5px;
}

.metric-value[b-cke47ssmxk] {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    font-family: 'Consolas', monospace;
    margin-bottom: 5px;
}

.metric-trend[b-cke47ssmxk] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.trend-up[b-cke47ssmxk] {
    color: #00d49a;
}

.trend-down[b-cke47ssmxk] {
    color: #ff4757;
}

/* 图表行 */
.charts-row[b-cke47ssmxk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.chart-panel[b-cke47ssmxk] {
    background: rgba(16, 26, 53, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(0, 193, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: fadeInUp-b-cke47ssmxk 0.6s ease-out;
    transition: all 0.3s ease;
}

.chart-panel:hover[b-cke47ssmxk] {
    box-shadow: 0 8px 32px rgba(0, 193, 255, 0.3),
                0 0 60px rgba(0, 193, 255, 0.1);
    transform: translateY(-2px);
    border-color: rgba(0, 193, 255, 0.4);
}

/* 面板进入动画 */
@keyframes fadeInUp-b-cke47ssmxk {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 为不同位置的图表添加延迟动画 */
.charts-row:nth-child(2) .chart-panel:nth-child(1)[b-cke47ssmxk] {
    animation-delay: 0.1s;
    animation-fill-mode: both; /* 保持初始状态 */
}

.charts-row:nth-child(2) .chart-panel:nth-child(2)[b-cke47ssmxk] {
    animation-delay: 0.2s;
    animation-fill-mode: both;
}

.charts-row:nth-child(3) .chart-panel:nth-child(1)[b-cke47ssmxk] {
    animation-delay: 0.3s;
    animation-fill-mode: both;
}

.charts-row:nth-child(3) .chart-panel:nth-child(2)[b-cke47ssmxk] {
    animation-delay: 0.4s;
    animation-fill-mode: both;
}

.panel-header[b-cke47ssmxk] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: rgba(0, 193, 255, 0.1);
    border-bottom: 1px solid rgba(0, 193, 255, 0.2);
    color: #00c1ff;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.panel-header i[b-cke47ssmxk] {
    font-size: 24px;
    animation: iconPulse-b-cke47ssmxk 2s ease-in-out infinite;
}

/* 图标脉冲动画 */
@keyframes iconPulse-b-cke47ssmxk {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* 面板标题光泽动画 */
.panel-header[b-cke47ssmxk]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 193, 255, 0.3),
        transparent
    );
    animation: shine-b-cke47ssmxk 3s infinite;
}

@keyframes shine-b-cke47ssmxk {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

.panel-body[b-cke47ssmxk] {
    padding: 20px;
}

.chart[b-cke47ssmxk] {
    width: 100%;
    height: 350px;
}

/* 指标卡片脉冲效果 - 针对超时工单 */
.metric-card.red:hover .metric-value[b-cke47ssmxk] {
    animation: valuePulse-b-cke47ssmxk 1s ease-in-out;
}

@keyframes valuePulse-b-cke47ssmxk {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05); /* 减小缩放比例 */
    }
}

/* 指标卡片动画 */
.metrics-row .metric-card:nth-child(1)[b-cke47ssmxk] {
    animation: fadeInUp-b-cke47ssmxk 0.5s ease-out;
}

.metrics-row .metric-card:nth-child(2)[b-cke47ssmxk] {
    animation: fadeInUp-b-cke47ssmxk 0.5s ease-out 0.1s;
    animation-fill-mode: both;
}

.metrics-row .metric-card:nth-child(3)[b-cke47ssmxk] {
    animation: fadeInUp-b-cke47ssmxk 0.5s ease-out 0.2s;
    animation-fill-mode: both;
}

.metrics-row .metric-card:nth-child(4)[b-cke47ssmxk] {
    animation: fadeInUp-b-cke47ssmxk 0.5s ease-out 0.3s;
    animation-fill-mode: both;
}

/* 超时工单卡片警告闪烁 */
.metric-card.red .metric-icon[b-cke47ssmxk] {
    animation: warningBlink-b-cke47ssmxk 2s ease-in-out infinite;
}

@keyframes warningBlink-b-cke47ssmxk {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 30px rgba(255, 71, 87, 0.6);
    }
}

/* 趋势指示器动画 */
.trend-up[b-cke47ssmxk] {
    animation: bounceUp-b-cke47ssmxk 1s ease-out;
}

.trend-down[b-cke47ssmxk] {
    animation: bounceDown-b-cke47ssmxk 1s ease-out;
}

@keyframes bounceUp-b-cke47ssmxk {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }
    60% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounceDown-b-cke47ssmxk {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    60% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 数据卡片渐变背景动画 */
.metric-card[b-cke47ssmxk]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(0, 193, 255, 0.1) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none; /* 防止阻挡鼠标事件 */
    z-index: 0;
}

.metric-card:hover[b-cke47ssmxk]::before {
    opacity: 1;
    animation: rotate-b-cke47ssmxk 10s linear infinite;
}

/* 确保内容在伪元素之上 */
.metric-card > *[b-cke47ssmxk] {
    position: relative;
    z-index: 1;
}

@keyframes rotate-b-cke47ssmxk {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 加载状态 */
.chart-loading[b-cke47ssmxk] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    color: #00c1ff;
    font-size: 16px;
}

.chart-loading[b-cke47ssmxk]::after {
    content: '';
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border: 4px solid rgba(0, 193, 255, 0.2);
    border-top-color: #00c1ff;
    border-radius: 50%;
    animation: spin-b-cke47ssmxk 1s linear infinite;
}

@keyframes spin-b-cke47ssmxk {
    to {
        transform: rotate(360deg);
    }
}

/* 响应式优化 */
@media (max-width: 1600px) {
    .chart[b-cke47ssmxk] {
        height: 300px;
    }
}

@media (max-width: 1400px) {
    .charts-row[b-cke47ssmxk] {
        grid-template-columns: 1fr;
    }
    
    .chart[b-cke47ssmxk] {
        height: 350px;
    }
}

/* /Components/Device/DeviceInfoList.razor.rz.scp.css */
/* 实时刷新状态样式 */
.auto-refresh-indicator[b-jj1h7uzdmt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

    .auto-refresh-indicator:hover[b-jj1h7uzdmt] {
        background-color: rgba(0, 0, 0, 0.08);
        cursor: pointer;
    }

.refresh-status-badge[b-jj1h7uzdmt] {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

    .refresh-status-badge.active[b-jj1h7uzdmt] {
        background-color: #28a745;
        color: white;
    }

    .refresh-status-badge.inactive[b-jj1h7uzdmt] {
        background-color: #6c757d;
        color: white;
    }

    .refresh-status-badge[b-jj1h7uzdmt]::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: currentColor;
    }

.last-refresh-time[b-jj1h7uzdmt] {
    color: #6c757d;
    font-size: 0.75rem;
    margin: 0;
    white-space: nowrap;
}

/* 导出处理中的样式 */
.spinner-border-sm[b-jj1h7uzdmt] {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.15em;
}

.alert h6[b-jj1h7uzdmt] {
    font-weight: 600;
    color: #004085;
}

.alert .text-muted[b-jj1h7uzdmt] {
    color: #6c757d !important;
}

/* 动画效果 */
@keyframes fadeIn-b-jj1h7uzdmt {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert.position-relative[b-jj1h7uzdmt] {
    animation: fadeIn-b-jj1h7uzdmt 0.3s ease-in-out;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* /Components/Index/Index.razor.rz.scp.css */
.grid-layout[b-cx917w4cbk] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(20, 100px);
    grid-gap: 10px;
    min-width: 900px;
}
/* /Components/Index/Indexview.razor.rz.scp.css */
:host[b-zk8a8jw67j] {
    background-color: #f5f7fa;
    color: #333;
    line-height: 1.6;
}

:host *[b-zk8a8jw67j] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}



.container[b-zk8a8jw67j] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* 顶部导航 */
.top-nav[b-zk8a8jw67j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 15px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-bottom: 25px;
}

.logo[b-zk8a8jw67j] {
    display: flex;
    align-items: center;
}

.logo-icon[b-zk8a8jw67j] {
    background: linear-gradient(135deg, #2196f3, #0d8aee);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

    .logo-icon i[b-zk8a8jw67j] {
        color: white;
        font-size: 22px;
    }

.logo h1[b-zk8a8jw67j] {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
}

.user-menu[b-zk8a8jw67j] {
    display: flex;
    align-items: center;
}

    .user-menu i[b-zk8a8jw67j] {
        font-size: 18px;
        color: #666;
        margin-left: 25px;
        cursor: pointer;
        transition: color 0.3s;
    }

        .user-menu i:hover[b-zk8a8jw67j] {
            color: #2196f3;
        }

.avatar[b-zk8a8jw67j] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00bcd4, #00a8d6);
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
}

/* 内容区域 */
.dashboard[b-zk8a8jw67j] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

.section-title[b-zk8a8jw67j] {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

    .section-title h2[b-zk8a8jw67j] {
        font-size: 1.4rem;
        font-weight: 600;
    }

    .section-title i[b-zk8a8jw67j] {
        margin-right: 10px;
        color: #2196f3;
        background-color: rgba(33, 150, 243, 0.1);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* 通知区域 - 选项卡样式 */
.notification-section[b-zk8a8jw67j] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-left: 4px solid #dd260c;
    overflow: hidden;
}

.notification-tabs[b-zk8a8jw67j] {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

.tab-item[b-zk8a8jw67j] {
    padding: 15px 25px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
    position: relative;
}

    .tab-item.active[b-zk8a8jw67j] {
        color: #dd260c;
        background-color: white;
    }

        .tab-item.active[b-zk8a8jw67j]::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #dd260c;
        }

    .tab-item .badge[b-zk8a8jw67j] {
        background-color: #f44336;
        color: white;
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 10px;
        margin-left: 5px;
    }

.tab-content[b-zk8a8jw67j] {
    padding: 20px;
    min-height: 280px; /* 固定最小高度，避免布局跳动 */
    display: block; /* 始终显示，不再使用display:none */
}

.notification-header[b-zk8a8jw67j] {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
}

    .notification-header i[b-zk8a8jw67j] {
        color: #2196f3;
        font-size: 24px;
        margin-right: 12px;
    }

    .notification-header h3[b-zk8a8jw67j] {
        font-size: 1.25rem;
        font-weight: 600;
    }

.notification-badge[b-zk8a8jw67j] {
    background-color: #f44336;
    color: white;
    font-size: 13px;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 12px;
}

.notification-list[b-zk8a8jw67j] {
    list-style: none;
}

.notification-item[b-zk8a8jw67j] {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.3s;
}

    .notification-item:hover[b-zk8a8jw67j] {
        background-color: rgba(33, 150, 243, 0.05);
    }

    .notification-item:last-child[b-zk8a8jw67j] {
        border-bottom: none;
    }

    .notification-item i[b-zk8a8jw67j] {
        margin-right: 15px;
        font-size: 18px;
    }

.notification-urgent i[b-zk8a8jw67j] {
    color: #f44336;
}

.notification-info i[b-zk8a8jw67j] {
    color: #2196f3;
}

.notification-success i[b-zk8a8jw67j] {
    color: #4caf50;
}

.notification-warning i[b-zk8a8jw67j] {
    color: #9c27b0;
}

.notification-content[b-zk8a8jw67j] {
    flex-grow: 1;
}

.notification-time[b-zk8a8jw67j] {
    color: #777;
    font-size: 14px;
    white-space: nowrap;
    margin-left: 15px;
}

/* 文件下载区域 */
.file-list[b-zk8a8jw67j] {
    list-style: none;
}

.file-item[b-zk8a8jw67j] {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
}

    .file-item:last-child[b-zk8a8jw67j] {
        border-bottom: none;
    }

.file-icon[b-zk8a8jw67j] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: rgba(33, 150, 243, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

    .file-icon i[b-zk8a8jw67j] {
        color: #2196f3;
        font-size: 18px;
    }

.file-info[b-zk8a8jw67j] {
    flex-grow: 1;
}

.file-name[b-zk8a8jw67j] {
    font-weight: 500;
    margin-bottom: 3px;
}

.file-meta[b-zk8a8jw67j] {
    font-size: 13px;
    color: #777;
}

.file-download[b-zk8a8jw67j] {
    color: #2196f3;
    font-size: 18px;
    cursor: pointer;
}

/* 使用说明区域 */
.guide-list[b-zk8a8jw67j] {
    list-style: none;
}

.guide-item[b-zk8a8jw67j] {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
}

    .guide-item:last-child[b-zk8a8jw67j] {
        border-bottom: none;
    }

.guide-title[b-zk8a8jw67j] {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 500;
}

    .guide-title i[b-zk8a8jw67j] {
        color: #2196f3;
        margin-right: 10px;
    }

.guide-desc[b-zk8a8jw67j] {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

/* 指标卡片 */
.metrics-grid[b-zk8a8jw67j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
}

    /* 添加两行卡片之间的间隔 */
    .metrics-grid + .metrics-grid[b-zk8a8jw67j] {
        margin-top: 30px; /* 增加两行卡片之间的间隔 */
    }

.metric-card[b-zk8a8jw67j] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    padding: 25px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

    .metric-card:hover[b-zk8a8jw67j] {
        transform: translateY(-7px);
        box-shadow: 0 10px 15px rgba(0,0,0,0.08);
    }

.metric-icon[b-zk8a8jw67j] {
    position: absolute;
    top: -15px;
    right: 15px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0.15;
}

    .metric-icon i[b-zk8a8jw67j] {
        font-size: 40px;
    }

.metric-value[b-zk8a8jw67j] {
    font-size: 2.8rem;
    font-weight: 700;
    color: #333;
    margin: 15px 0 5px;
}

.metric-title[b-zk8a8jw67j] {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.metric-footer[b-zk8a8jw67j] {
    border-top: 1px dashed #e0e0e0;
    padding-top: 15px;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.metric-trend[b-zk8a8jw67j] {
    display: flex;
    align-items: center;
    margin-right: 15px;
    color: #4caf50;
}

    .metric-trend.down[b-zk8a8jw67j] {
        color: #f44336;
    }

.metric-tag[b-zk8a8jw67j] {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-right: 8px;
}

.tag-danger[b-zk8a8jw67j] {
    background-color: rgba(244, 67, 54, 0.1);
    color: #f44336;
}

.tag-warning[b-zk8a8jw67j] {
    background-color: rgba(255, 152, 0, 0.1);
    color: #ff9800;
}

/* 进度和状态卡片 */
.status-grid[b-zk8a8jw67j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

.status-card[b-zk8a8jw67j] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    padding: 25px;
}

.progress-bar[b-zk8a8jw67j] {
    height: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    margin: 25px 0;
    overflow: hidden;
}

.progress-fill[b-zk8a8jw67j] {
    height: 100%;
    background: linear-gradient(90deg, #2196f3, #0d8aee);
    border-radius: 5px;
}

.progress-details[b-zk8a8jw67j] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    text-align: center;
}

.progress-item[b-zk8a8jw67j] {
    padding: 12px 5px;
    background-color: rgba(33, 150, 243, 0.05);
    border-radius: 8px;
}

    .progress-item:nth-child(2)[b-zk8a8jw67j] {
        background-color: rgba(76, 175, 80, 0.05);
    }

    .progress-item:nth-child(3)[b-zk8a8jw67j] {
        background-color: rgba(255, 152, 0, 0.05);
    }

    .progress-item:nth-child(4)[b-zk8a8jw67j] {
        background-color: rgba(156, 39, 176, 0.05);
    }

    .progress-item span[b-zk8a8jw67j] {
        display: block;
    }

    .progress-item .label[b-zk8a8jw67j] {
        color: #666;
        font-size: 0.95rem;
        margin-bottom: 5px;
    }

    .progress-item .value[b-zk8a8jw67j] {
        font-weight: 700;
        font-size: 1.4rem;
    }

/* 统计图表卡片 */
.chart-grid[b-zk8a8jw67j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

@media (max-width: 1100px) {
    .chart-grid[b-zk8a8jw67j] {
        grid-template-columns: 1fr;
    }
}

.chart-card[b-zk8a8jw67j] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    padding: 25px;
}

.chart-container[b-zk8a8jw67j] {
    height: 300px;
    margin-top: 15px;
}

/* 特定卡片主题 */
.card-primary[b-zk8a8jw67j] {
    border-left: 4px solid #2196f3;
}

.card-success[b-zk8a8jw67j] {
    border-left: 4px solid #4caf50;
}

.card-warning[b-zk8a8jw67j] {
    border-left: 4px solid #ff9800;
}

.card-info[b-zk8a8jw67j] {
    border-left: 4px solid #00bcd4;
}

.bg-primary[b-zk8a8jw67j] {
    background-color: #2196f3;
}

.bg-success[b-zk8a8jw67j] {
    background-color: #4caf50;
}

.bg-warning[b-zk8a8jw67j] {
    background-color: #ff9800;
}

.bg-info[b-zk8a8jw67j] {
    background-color: #00bcd4;
}

.bg-danger[b-zk8a8jw67j] {
    background-color: #f44336;
}

.text-primary[b-zk8a8jw67j] {
    color: #2196f3;
}

.text-success[b-zk8a8jw67j] {
    color: #4caf50;
}

.text-warning[b-zk8a8jw67j] {
    color: #ff9800;
}

.text-danger[b-zk8a8jw67j] {
    color: #f44336;
}

/* 动画效果 */
@keyframes fadeIn-b-zk8a8jw67j {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard > *[b-zk8a8jw67j] {
    animation: fadeIn-b-zk8a8jw67j 0.5s forwards;
}

.metrics-grid > *[b-zk8a8jw67j] {
    animation-delay: 0.1s;
}

.status-grid > *[b-zk8a8jw67j] {
    animation-delay: 0.2s;
}

.chart-grid > *[b-zk8a8jw67j] {
    animation-delay: 0.3s;
}

/* 空状态样式 */
.empty-state[b-zk8a8jw67j] {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

    .empty-state i[b-zk8a8jw67j] {
        font-size: 48px;
        margin-bottom: 16px;
        color: #ddd;
    }

    .empty-state p[b-zk8a8jw67j] {
        font-size: 16px;
        margin: 0;
    }

/* 内容链接样式 */
.content-link[b-zk8a8jw67j] {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

    .content-link:hover[b-zk8a8jw67j] {
        color: #2196f3;
        text-decoration: none;
    }

/* 内容切换动画 */
.notification-list[b-zk8a8jw67j] {
    animation: fadeInUp-b-zk8a8jw67j 0.3s ease-out;
}

@keyframes fadeInUp-b-zk8a8jw67j {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 加载状态样式 */
.empty-state .fa-spinner[b-zk8a8jw67j] {
    animation: spin-b-zk8a8jw67j 1s linear infinite;
}

@keyframes spin-b-zk8a8jw67j {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/* 快捷菜单样式 */
.shortcut-menu-container[b-zk8a8jw67j] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.shortcut-menu-header[b-zk8a8jw67j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    font-size: 14px;
}

    .shortcut-menu-header i[b-zk8a8jw67j] {
        font-size: 16px;
    }

.shortcut-menu-list[b-zk8a8jw67j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 12px;
    padding: 15px;
    min-height: 100px;
}

.shortcut-menu-item[b-zk8a8jw67j] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .shortcut-menu-item:hover[b-zk8a8jw67j] {
        background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    }

.shortcut-icon[b-zk8a8jw67j] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 20px;
}

.shortcut-title[b-zk8a8jw67j] {
    font-size: 12px;
    text-align: center;
    word-break: break-word;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
}
/* /Components/Index/ShortcutMenuManagement.razor.rz.scp.css */
/* 快捷菜单管理页面样式 */

.shortcut-menu-management-page[b-1nc8sick1z] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* 页面头部 */
.page-header[b-1nc8sick1z] {
    background: white;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 24px;
}

.header-title[b-1nc8sick1z] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.header-title i[b-1nc8sick1z] {
    font-size: 24px;
    color: #2196f3;
}

.header-title h1[b-1nc8sick1z] {
    margin: 0;
    color: #333;
    font-size: 24px;
    font-weight: 600;
}

.header-desc[b-1nc8sick1z] {
    color: #666;
    font-size: 14px;
    margin: 0;
}

/* 主要内容区域 */
.management-content[b-1nc8sick1z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

/* 左侧：已添加菜单 */
.added-menu-section[b-1nc8sick1z] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

.section-title[b-1nc8sick1z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    color: #333;
}

.count-badge[b-1nc8sick1z] {
    background: #2196f3;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* 加载状态 */
.loading-state[b-1nc8sick1z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #666;
}

.loading-state i[b-1nc8sick1z] {
    font-size: 48px;
    margin-bottom: 16px;
    color: #2196f3;
}

/* 空状态 */
.empty-state[b-1nc8sick1z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #666;
    text-align: center;
}

.empty-state i[b-1nc8sick1z] {
    font-size: 48px;
    margin-bottom: 16px;
    color: #ccc;
}

.empty-state p[b-1nc8sick1z] {
    margin: 0 0 8px 0;
    font-size: 16px;
}

.empty-state small[b-1nc8sick1z] {
    color: #999;
    font-size: 14px;
}

/* 菜单列表容器 */
.menu-list-container[b-1nc8sick1z] {
    max-height: 400px;
    overflow-y: auto;
}

/* 菜单项 */
.menu-item[b-1nc8sick1z] {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #f1f3f4;
    transition: background-color 0.2s;
    cursor: move;
}

.menu-item:hover[b-1nc8sick1z] {
    background-color: #f8f9fa;
}

.menu-item:last-child[b-1nc8sick1z] {
    border-bottom: none;
}

.drag-handle[b-1nc8sick1z] {
    margin-right: 16px;
    color: #999;
    cursor: grab;
}

.drag-handle:hover[b-1nc8sick1z] {
    color: #666;
}

.menu-icon[b-1nc8sick1z] {
    margin-right: 16px;
    font-size: 20px;
    color: #666;
    width: 24px;
    text-align: center;
}

.menu-info[b-1nc8sick1z] {
    flex: 1;
}

.menu-title[b-1nc8sick1z] {
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.menu-url[b-1nc8sick1z] {
    font-size: 12px;
    color: #999;
}

.btn-remove[b-1nc8sick1z] {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.btn-remove:hover[b-1nc8sick1z] {
    background-color: #f8d7da;
}

/* 操作按钮 */
.action-buttons[b-1nc8sick1z] {
    padding: 20px 24px;
    border-top: 1px solid #e9ecef;
    display: flex;
    gap: 12px;
}

.btn[b-1nc8sick1z] {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary[b-1nc8sick1z] {
    background: #2196f3;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-1nc8sick1z] {
    background: #1976d2;
}

.btn-primary:disabled[b-1nc8sick1z] {
    background: #ccc;
    cursor: not-allowed;
}

.btn-secondary[b-1nc8sick1z] {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover[b-1nc8sick1z] {
    background: #545b62;
}

/* 右侧：可用菜单 */
.available-menu-section[b-1nc8sick1z] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

.info-badge[b-1nc8sick1z] {
    background: #28a745;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* 菜单选择器列表 */
.menu-selector-list[b-1nc8sick1z] {
    max-height: 400px;
    overflow-y: auto;
}

/* 菜单选择器项 */
.menu-selector-item[b-1nc8sick1z] {
    padding: 16px 24px;
    border-bottom: 1px solid #f1f3f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-selector-item:last-child[b-1nc8sick1z] {
    border-bottom: none;
}

.menu-selector-header[b-1nc8sick1z] {
    display: flex;
    align-items: center;
    flex: 1;
}

.selector-icon[b-1nc8sick1z] {
    margin-right: 16px;
    font-size: 20px;
    color: #666;
    width: 24px;
    text-align: center;
}

.selector-info[b-1nc8sick1z] {
    flex: 1;
}

.selector-title[b-1nc8sick1z] {
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.selector-url[b-1nc8sick1z] {
    font-size: 12px;
    color: #999;
}

.btn-add[b-1nc8sick1z] {
    background: #28a745;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.btn-add:hover:not(:disabled)[b-1nc8sick1z] {
    background: #218838;
}

.btn-add:disabled[b-1nc8sick1z] {
    background: #ccc;
    cursor: not-allowed;
}

/* 响应式样式 */

@media (max-width: 1024px) {
    .shortcut-menu-management-page .management-content[b-1nc8sick1z] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .shortcut-menu-management-page[b-1nc8sick1z] {
        padding: 12px;
    }

        .shortcut-menu-management-page .header-title h1[b-1nc8sick1z] {
            font-size: 20px;
        }

        .shortcut-menu-management-page .header-desc[b-1nc8sick1z] {
            font-size: 12px;
        }

        .shortcut-menu-management-page .menu-item[b-1nc8sick1z] {
            padding: 10px;
        }

        .shortcut-menu-management-page .action-buttons[b-1nc8sick1z] {
            flex-direction: column;
        }

        .shortcut-menu-management-page .btn[b-1nc8sick1z] {
            width: 100%;
        }
}
/* /Components/Inspection/Work/InspectionWorkList.razor.rz.scp.css */
.work-status-badge[b-z1yaghyo84] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.work-status-待接单[b-z1yaghyo84] {
    background-color: #fff3cd;
    color: #856404;
}

.work-status-已接单[b-z1yaghyo84] {
    background-color: #d1ecf1;
    color: #0c5460;
}

.work-status-执行中[b-z1yaghyo84] {
    background-color: #d4edda;
    color: #155724;
}

.work-status-已完成[b-z1yaghyo84] {
    background-color: #cce5ff;
    color: #004085;
}

.work-status-审核通过[b-z1yaghyo84] {
    background-color: #d4edda;
    color: #155724;
}

.work-status-审核拒绝[b-z1yaghyo84] {
    background-color: #f8d7da;
    color: #721c24;
}

.work-status-已取消[b-z1yaghyo84] {
    background-color: #e2e3e5;
    color: #383d41;
}

.urgent-work[b-z1yaghyo84] {
    border-left: 4px solid #dc3545;
    background-color: #fff5f5;
}

.overdue-work[b-z1yaghyo84] {
    border-left: 4px solid #ffc107;
    background-color: #fffbf0;
}
/* /Components/Public/Dataview.razor.rz.scp.css */

:host[b-tnvxivgpym] {
    background: linear-gradient(135deg, #0d152c, #0f1b39);
    color: #ffffff;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    min-width: 1600px;
    position: relative;
}

:host *[b-tnvxivgpym] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
}



/* 实时任务滚动区域 - 全新设计 */
:global(.ticker-container)[b-tnvxivgpym] {
    height: 100px;
    background: linear-gradient(135deg, rgba(24, 39, 75, 0.95), rgba(16, 26, 53, 0.9));
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(0, 193, 255, 0.1);
    border: 1px solid rgba(0, 193, 255, 0.2);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    position: relative;
}

:global(.ticker-container::before)[b-tnvxivgpym] {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent,
        #00c1ff 20%,
        #00d49a 50%,
        #00c1ff 80%,
        transparent
    );
    opacity: 0.6;
}

:global(.ticker-container::after)[b-tnvxivgpym] {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at top, rgba(0, 193, 255, 0.05), transparent 50%);
    pointer-events: none;
}

:global(.ticker-title)[b-tnvxivgpym] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    color: #00c1ff;
    font-weight: bold;
    white-space: nowrap;
    font-size: 16px;
    background: linear-gradient(135deg, rgba(0, 193, 255, 0.2), rgba(0, 212, 154, 0.15));
    border-right: 2px solid rgba(0, 193, 255, 0.3);
    position: relative;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 1;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
}

:global(.ticker-title::before)[b-tnvxivgpym] {
    content: '●';
    color: #00d49a;
    margin-right: 10px;
    font-size: 12px;
    animation: blink-b-tnvxivgpym 2s ease-in-out infinite;
}

@keyframes blink-b-tnvxivgpym {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

:global(.ticker-content)[b-tnvxivgpym] {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

:global(.ticker-marquee)[b-tnvxivgpym] {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
}

:global(.ticker-item)[b-tnvxivgpym] {
    display: inline-flex;
    align-items: center;
    margin-right: 60px;
    padding: 12px 20px;
    background: rgba(16, 26, 53, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(0, 193, 255, 0.15);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

:global(.ticker-item:hover)[b-tnvxivgpym] {
    background: rgba(0, 193, 255, 0.15);
    border-color: rgba(0, 193, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 193, 255, 0.3);
}

/* 任务类型标签 */
:global(.ticker-type)[b-tnvxivgpym] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    margin-right: 12px;
    font-weight: 600;
    border: 1px solid;
    letter-spacing: 1px;
}

:global(.ticker-workorder)[b-tnvxivgpym] {
    background: linear-gradient(135deg, rgba(255, 170, 51, 0.25), rgba(255, 170, 51, 0.15));
    color: #ffaa33;
    border-color: rgba(255, 170, 51, 0.4);
    box-shadow: 0 0 10px rgba(255, 170, 51, 0.3);
}

:global(.ticker-inspection)[b-tnvxivgpym] {
    background: linear-gradient(135deg, rgba(0, 212, 154, 0.25), rgba(0, 212, 154, 0.15));
    color: #00d49a;
    border-color: rgba(0, 212, 154, 0.4);
    box-shadow: 0 0 10px rgba(0, 212, 154, 0.3);
}

/* 状态标签 */
:global(.ticker-status)[b-tnvxivgpym] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    margin-right: 10px;
    border-radius: 10px;
    background: rgba(0, 193, 255, 0.12);
    border: 1px solid rgba(0, 193, 255, 0.25);
    font-size: 11px;
    color: #00c1ff;
    font-weight: 500;
}

/* 设备名称 */
:global(.ticker-device)[b-tnvxivgpym] {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
    font-weight: 600;
    color: #ffffff;
    font-size: 14px;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

:global(.ticker-device::before)[b-tnvxivgpym] {
    content: '▸';
    color: #00c1ff;
    margin-right: 6px;
    font-size: 16px;
}

/* 故障描述 */
:global(.ticker-desc)[b-tnvxivgpym] {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
    color: #a3b1d1;
    font-size: 13px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 工单号 */
:global(.ticker-no)[b-tnvxivgpym] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(0, 212, 154, 0.15);
    border: 1px solid rgba(0, 212, 154, 0.3);
    border-radius: 10px;
    color: #00d49a;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0.5px;
    margin-left: 8px;
    box-shadow: 0 0 8px rgba(0, 212, 154, 0.3);
}

:global(.ticker-no::before)[b-tnvxivgpym] {
    content: '#';
    color: #00d49a;
    margin-right: 2px;
    opacity: 0.7;
}


.dashboard[b-tnvxivgpym] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    min-width: 1600px;
    padding: 15px;
    position: relative;
}

/* 顶部导航栏 - 优化版 */
.navbar[b-tnvxivgpym] {
    display: flex;
    align-items: center;
    height: 80px;
    background: rgba(16, 26, 53, 0.8);
    border-radius: 12px;
    padding: 0 25px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 193, 255, 0.1);
    margin-bottom: 15px;
    position: relative;
}

.menu-left[b-tnvxivgpym] {
    flex: 1;
    display: flex;
    gap: 10px;
}

.system-title-container[b-tnvxivgpym] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.system-title[b-tnvxivgpym] {
    font-size: 36px;
    font-weight: bold;
    background: linear-gradient(90deg, #00c1ff, #00d49a);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(0, 193, 255, 0.7);
}

.system-subtitle[b-tnvxivgpym] {
    font-size: 16px;
    color: #00c1ff;
    letter-spacing: 5px;
    text-align: center;
    margin-top: 5px;
}

.top-right[b-tnvxivgpym] {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

.real-time[b-tnvxivgpym] {
    font-size: 18px;
    background: rgba(24, 39, 75, 0.8);
    padding: 8px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 10px rgba(0, 193, 255, 0.2);
}

    .real-time i[b-tnvxivgpym] {
        color: #00c1ff;
    }

.logout-btn[b-tnvxivgpym] {
    background: rgba(178, 44, 77, 0.15);
    color: #ff5588;
    border: none;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 10px rgba(178, 44, 77, 0.3);
}

    .logout-btn:hover[b-tnvxivgpym] {
        background: rgba(178, 44, 77, 0.3);
        color: #ff7799;
        transform: translateY(-2px);
    }

.menu-btn[b-tnvxivgpym] {
    background: rgba(24, 39, 75, 0.8);
    color: #a3b1d1;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .menu-btn:hover[b-tnvxivgpym] {
        background: rgba(39, 64, 126, 0.8);
        color: #ffffff;
        box-shadow: 0 0 15px rgba(0, 193, 255, 0.3);
    }

    .menu-btn.active[b-tnvxivgpym] {
        background: rgba(0, 193, 255, 0.15);
        color: #00c1ff;
        border-bottom: 3px solid #00c1ff;
    }

/* 主内容区域样式 */
.main-content[b-tnvxivgpym] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 15px;
    height: calc(100% - 185px); /* 调整高度适应底部区域 */
    margin-bottom: 15px;
}

/* 左侧面板 - 全新设计 */

/* 分节标题 */
.section-title[b-tnvxivgpym] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
    font-size: 14px;
    color: #00c1ff;
    font-weight: 600;
    letter-spacing: 1px;
}

.title-line[b-tnvxivgpym] {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 193, 255, 0.5), transparent);
}

/* 核心指标网格 */
.core-metrics-grid[b-tnvxivgpym] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

/* 大卡片样式 - 当日工单 */
.big-stat-card[b-tnvxivgpym] {
    background: linear-gradient(135deg, rgba(0, 193, 255, 0.15), rgba(16, 26, 53, 0.9));
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(0, 193, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 193, 255, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.big-stat-card[b-tnvxivgpym]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(0, 193, 255, 0.1), transparent 60%);
    pointer-events: none;
}

.big-stat-card:hover[b-tnvxivgpym] {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 193, 255, 0.35);
    border-color: rgba(0, 193, 255, 0.5);
}

.stat-icon-bg[b-tnvxivgpym] {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(0, 193, 255, 0.2), transparent 70%);
    opacity: 0.5;
}

.stat-icon-bg i[b-tnvxivgpym] {
    font-size: 48px;
    color: rgba(0, 193, 255, 0.3);
}

.stat-info[b-tnvxivgpym] {
    position: relative;
    z-index: 1;
}

.stat-label[b-tnvxivgpym] {
    font-size: 12px;
    color: #a3b1d1;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.stat-number[b-tnvxivgpym] {
    font-size: 42px;
    font-weight: bold;
    color: #00c1ff;
    line-height: 1;
    margin-bottom: 12px;
    text-shadow: 0 0 20px rgba(0, 193, 255, 0.5);
    font-family: 'Arial', sans-serif;
}

.stat-progress[b-tnvxivgpym] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.progress-item[b-tnvxivgpym] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #ffffff;
}

.progress-dot[b-tnvxivgpym] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
}

.progress-dot.completed[b-tnvxivgpym] {
    background: #00d49a;
    color: #00d49a;
}

.progress-dot.progress[b-tnvxivgpym] {
    background: #00c1ff;
    color: #00c1ff;
}

.progress-dot.pending[b-tnvxivgpym] {
    background: #ffaa33;
    color: #ffaa33;
}

.stat-footer[b-tnvxivgpym] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #a3b1d1;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 193, 255, 0.2);
}

.stat-footer i[b-tnvxivgpym] {
    font-size: 14px;
}

/* 中等卡片样式 */
.medium-stat-card[b-tnvxivgpym] {
    background: rgba(16, 26, 53, 0.8);
    border-radius: 10px;
    border: 1px solid rgba(0, 193, 255, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
}

.medium-stat-card:hover[b-tnvxivgpym] {
    transform: translateX(3px);
    box-shadow: 0 6px 20px rgba(0, 193, 255, 0.25);
    border-color: rgba(0, 193, 255, 0.3);
}

.card-header[b-tnvxivgpym] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(0, 193, 255, 0.08);
    border-bottom: 1px solid rgba(0, 193, 255, 0.15);
    font-size: 12px;
    color: #00c1ff;
    font-weight: 500;
}

.card-header i[b-tnvxivgpym] {
    font-size: 16px;
}

.card-body[b-tnvxivgpym] {
    padding: 12px;
}

/* 巡检计划卡片 */
.medium-stat-card.inspection .main-number[b-tnvxivgpym] {
    font-size: 32px;
    font-weight: bold;
    color: #00d49a;
    text-align: center;
    margin-bottom: 10px;
    text-shadow: 0 0 15px rgba(0, 212, 154, 0.4);
}

.overdue-alert[b-tnvxivgpym] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    background: rgba(255, 85, 85, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(255, 85, 85, 0.3);
    font-size: 12px;
    color: #ff5555;
    font-weight: 600;
    margin-top: 8px;
}

.pulse-icon[b-tnvxivgpym] {
    font-size: 16px !important;
    animation: badgePulse 2s ease-in-out infinite;
}

.status-normal[b-tnvxivgpym] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    background: rgba(0, 212, 154, 0.1);
    border-radius: 8px;
    font-size: 12px;
    color: #00d49a;
    margin-top: 8px;
}

.status-normal i[b-tnvxivgpym] {
    font-size: 16px;
}

.sub-stats[b-tnvxivgpym] {
    display: flex;
    justify-content: space-around;
    margin-bottom: 12px;
}

.sub-item[b-tnvxivgpym] {
    text-align: center;
}

.sub-value[b-tnvxivgpym] {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
}

.sub-label[b-tnvxivgpym] {
    font-size: 10px;
    color: #a3b1d1;
    margin-top: 2px;
}

.completion-bar[b-tnvxivgpym] {
    height: 6px;
    background: rgba(0, 193, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.completion-fill[b-tnvxivgpym] {
    height: 100%;
    background: linear-gradient(90deg, #00c1ff, #00d49a);
    border-radius: 3px;
    transition: width 0.6s ease;
    box-shadow: 0 0 10px rgba(0, 212, 154, 0.6);
}

.completion-text[b-tnvxivgpym] {
    font-size: 10px;
    color: #a3b1d1;
    text-align: center;
}

/* 人员在岗卡片 */
.medium-stat-card.staff .staff-ratio[b-tnvxivgpym] {
    text-align: center;
    margin-bottom: 10px;
    font-family: 'Arial', sans-serif;
}

.ratio-current[b-tnvxivgpym] {
    font-size: 28px;
    font-weight: bold;
    color: #00d49a;
    text-shadow: 0 0 12px rgba(0, 212, 154, 0.5);
}

.ratio-separator[b-tnvxivgpym] {
    font-size: 20px;
    color: #a3b1d1;
    margin: 0 4px;
}

.ratio-total[b-tnvxivgpym] {
    font-size: 20px;
    font-weight: 500;
    color: #a3b1d1;
}

.staff-ring[b-tnvxivgpym] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 10px auto;
}

.staff-ring svg[b-tnvxivgpym] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ring-bg[b-tnvxivgpym] {
    fill: none;
    stroke: rgba(0, 193, 255, 0.1);
    stroke-width: 8;
}

.ring-progress[b-tnvxivgpym] {
    fill: none;
    stroke: #00d49a;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 282.7;
    transition: stroke-dashoffset 1s ease;
    filter: drop-shadow(0 0 6px rgba(0, 212, 154, 0.6));
}

.ring-text[b-tnvxivgpym] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: bold;
    color: #00d49a;
}

.staff-labels[b-tnvxivgpym] {
    display: flex;
    justify-content: space-around;
    font-size: 10px;
    margin-top: 8px;
}

.label-on[b-tnvxivgpym] {
    color: #00d49a;
}

.label-off[b-tnvxivgpym] {
    color: #a3b1d1;
}

/* 地图上方的紧凑型指标卡片 */
.top-metrics[b-tnvxivgpym] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 15px;
}

.indicator-card-compact[b-tnvxivgpym] {
    background: rgba(16, 26, 53, 0.9);
    border-radius: 10px;
    border: 1px solid rgba(0, 193, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    height: 90px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.indicator-card-compact[b-tnvxivgpym]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00c1ff, #00d49a);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.indicator-card-compact:hover[b-tnvxivgpym] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 193, 255, 0.3);
    border-color: rgba(0, 193, 255, 0.4);
}

.indicator-card-compact:hover[b-tnvxivgpym]::after {
    opacity: 1;
}

/* 紧凑卡片左侧图标 */
.compact-icon[b-tnvxivgpym] {
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 193, 255, 0.1);
    position: relative;
}

.compact-icon[b-tnvxivgpym]::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 193, 255, 0.15), transparent 65%);
}

.compact-icon i[b-tnvxivgpym] {
    font-size: 28px;
    color: #00c1ff;
    z-index: 1;
    filter: drop-shadow(0 0 6px rgba(0, 193, 255, 0.4));
}

/* 紧凑卡片右侧内容 */
.compact-content[b-tnvxivgpym] {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.compact-label[b-tnvxivgpym] {
    font-size: 11px;
    color: #a3b1d1;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.compact-value[b-tnvxivgpym] {
    font-size: 28px;
    font-weight: bold;
    color: #ffffff;
    line-height: 1;
    font-family: 'Arial', sans-serif;
    text-shadow: 0 0 12px rgba(0, 193, 255, 0.3);
}

.compact-bar[b-tnvxivgpym] {
    height: 4px;
    background: rgba(0, 193, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
    margin: 4px 0 2px 0;
}

.bar-fill[b-tnvxivgpym] {
    height: 100%;
    background: linear-gradient(90deg, #00c1ff, #00d49a);
    border-radius: 2px;
    transition: width 0.6s ease;
    box-shadow: 0 0 8px rgba(0, 212, 154, 0.6);
}

.compact-info[b-tnvxivgpym] {
    font-size: 10px;
    color: #a3b1d1;
}

.compact-tags[b-tnvxivgpym] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mini-tag[b-tnvxivgpym] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid;
}

.mini-tag.danger[b-tnvxivgpym] {
    background: rgba(255, 85, 85, 0.15);
    color: #ff5555;
    border-color: rgba(255, 85, 85, 0.3);
}

.mini-tag.warning[b-tnvxivgpym] {
    background: rgba(255, 170, 51, 0.15);
    color: #ffaa33;
    border-color: rgba(255, 170, 51, 0.3);
}

.compact-alert[b-tnvxivgpym] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #ff5555;
    margin-top: 2px;
}

.compact-alert i[b-tnvxivgpym] {
    font-size: 12px;
}

.blink-icon[b-tnvxivgpym] {
    animation: urgentBlink 1.5s ease-in-out infinite;
}

.compact-normal[b-tnvxivgpym] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #00d49a;
    margin-top: 2px;
}

.compact-normal i[b-tnvxivgpym] {
    font-size: 12px;
}

.alert-pulse[b-tnvxivgpym] {
    animation: numberPulse-b-tnvxivgpym 2s ease-in-out infinite;
}

@keyframes numberPulse-b-tnvxivgpym {
    0%, 100% {
        text-shadow: 0 0 12px rgba(255, 85, 85, 0.5);
        color: #ff5555;
    }
    50% {
        text-shadow: 0 0 20px rgba(255, 85, 85, 0.8);
        color: #ff8888;
    }
}

/* 卡片主题色 */
.indicator-card-compact.month-card .compact-icon[b-tnvxivgpym] {
    background: linear-gradient(135deg, rgba(0, 212, 154, 0.15), rgba(0, 212, 154, 0.05));
}

.indicator-card-compact.month-card .compact-icon i[b-tnvxivgpym] {
    color: #00d49a;
    filter: drop-shadow(0 0 6px rgba(0, 212, 154, 0.4));
}

.indicator-card-compact.month-card .compact-value[b-tnvxivgpym] {
    color: #00d49a;
    text-shadow: 0 0 12px rgba(0, 212, 154, 0.4);
}

.indicator-card-compact.warning-card .compact-icon[b-tnvxivgpym] {
    background: linear-gradient(135deg, rgba(255, 170, 51, 0.15), rgba(255, 170, 51, 0.05));
}

.indicator-card-compact.warning-card .compact-icon i[b-tnvxivgpym] {
    color: #ffaa33;
    filter: drop-shadow(0 0 6px rgba(255, 170, 51, 0.4));
}

.indicator-card-compact.warning-card .compact-value[b-tnvxivgpym] {
    color: #ffaa33;
    text-shadow: 0 0 12px rgba(255, 170, 51, 0.4);
}

.indicator-card-compact.alert-card .compact-icon[b-tnvxivgpym] {
    background: linear-gradient(135deg, rgba(255, 85, 85, 0.15), rgba(255, 85, 85, 0.05));
}

.indicator-card-compact.alert-card .compact-icon i[b-tnvxivgpym] {
    color: #ff5555;
    filter: drop-shadow(0 0 6px rgba(255, 85, 85, 0.4));
}

.indicator-card-compact.alert-card .compact-value[b-tnvxivgpym] {
    color: #ff5555;
    text-shadow: 0 0 12px rgba(255, 85, 85, 0.4);
}


.metric-header[b-tnvxivgpym] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #00c1ff;
    font-size: 13px;
}

.metric-header i[b-tnvxivgpym] {
    font-size: 16px;
}

.metric-content[b-tnvxivgpym] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.metric-value[b-tnvxivgpym] {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    font-family: 'Arial', sans-serif;
    line-height: 1;
}

.metric-value.alert[b-tnvxivgpym] {
    color: #ff5555;
}

.metric-details[b-tnvxivgpym] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
}

.detail-item[b-tnvxivgpym] {
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
}

.detail-item.completed[b-tnvxivgpym] {
    color: #00d49a;
    background: rgba(0, 212, 154, 0.1);
}

.detail-item.progress[b-tnvxivgpym] {
    color: #00c1ff;
    background: rgba(0, 193, 255, 0.1);
}

.detail-item.pending[b-tnvxivgpym] {
    color: #ffaa33;
    background: rgba(255, 170, 51, 0.1);
}

.detail-item.fault[b-tnvxivgpym] {
    color: #ff5555;
    background: rgba(255, 85, 85, 0.1);
}

.detail-item.check[b-tnvxivgpym] {
    color: #ffaa33;
    background: rgba(255, 170, 51, 0.1);
}

.detail-item.on-duty[b-tnvxivgpym] {
    color: #00d49a;
    background: rgba(0, 212, 154, 0.1);
}

.detail-item.off-duty[b-tnvxivgpym] {
    color: #a3b1d1;
    background: rgba(163, 177, 209, 0.1);
}

.detail-item.alert[b-tnvxivgpym] {
    color: #ff5555;
    background: rgba(255, 85, 85, 0.1);
}

.metric-extra[b-tnvxivgpym] {
    font-size: 10px;
    color: #a3b1d1;
    margin-top: 3px;
}

.metric-extra.overdue[b-tnvxivgpym] {
    color: #ff5555;
    font-weight: 500;
}

/* 主要内容面板行 */
.panels-row[b-tnvxivgpym] {
    display: flex;
    flex: 1;
    gap: 15px;
    min-height: 0;
}

.panel[b-tnvxivgpym] {
    background: #18274b;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 193, 255, 0.1);
    position: relative;
    overflow: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.panel[b-tnvxivgpym]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #00c1ff, #00d49a);
}

.panel-title[b-tnvxivgpym] {
    font-size: 16px;
    margin-bottom: 15px;
    color: #00c1ff;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.panel-title i[b-tnvxivgpym] {
    font-size: 20px;
}

.left-panel[b-tnvxivgpym] {
    width: 22%;
}

.middle-panel[b-tnvxivgpym] {
    width: 56%;
}

.right-panel[b-tnvxivgpym] {
    width: 22%;
}

/* 地图容器样式 */
.map-container-main[b-tnvxivgpym] {
    flex: 1;
    background: rgba(16, 26, 53, 0.6);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    min-height: 400px;
    border: 1px solid rgba(0, 193, 255, 0.1);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3);
}

.map-placeholder[b-tnvxivgpym] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #a3b1d1;
    font-size: 24px;
    text-align: center;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="none" stroke="rgba(0,193,255,0.1)" stroke-width="1"/></svg>');
    background-size: 20px 20px;
}

    .map-placeholder i[b-tnvxivgpym] {
        font-size: 50px;
        margin-bottom: 20px;
        color: rgba(0, 193, 255, 0.3);
    }

.map-grid[b-tnvxivgpym] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.data-point[b-tnvxivgpym] {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.device-point[b-tnvxivgpym] {
    background: #00d49a;
    box-shadow: 0 0 15px #00d49a;
}

.warning-point[b-tnvxivgpym] {
    background: #ffaa33;
    box-shadow: 0 0 15px #ffaa33;
}

.danger-point[b-tnvxivgpym] {
    background: #ff5555;
    box-shadow: 0 0 15px #ff5555;
}

.highlight[b-tnvxivgpym] {
    animation: pulse-b-tnvxivgpym 1.5s infinite;
}

@keyframes pulse-b-tnvxivgpym {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 193, 255, 0.8);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(0, 193, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 193, 255, 0);
    }
}

/* 响应式调整 */
@media (max-width: 1600px) {
    .panel-title[b-tnvxivgpym] {
        font-size: 16px;
    }

    .menu-btn[b-tnvxivgpym] {
        padding: 8px 16px;
        font-size: 14px;
    }

    .stat-value[b-tnvxivgpym] {
        font-size: 28px;
    }

    .ticker-item[b-tnvxivgpym] {
        font-size: 14px;
    }

    .system-title[b-tnvxivgpym] {
        font-size: 32px;
    }
}


/* 图表容器样式 */
.chart-container-full[b-tnvxivgpym] {
    flex: 1;
    margin-bottom: 15px;
    min-height: 0;
    overflow: hidden;
}

.chart-container-half[b-tnvxivgpym] {
    flex: 1;
    margin-bottom: 15px;
    min-height: 0;
    overflow: hidden;
}

.chart[b-tnvxivgpym] {
    width: 100%;
    height: 100%;
}

/* 排名容器样式 */
.rank-container[b-tnvxivgpym] {
    flex: 1;
    overflow:clip;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 5px;
}

.rank-item[b-tnvxivgpym] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(16, 26, 53, 0.6);
    padding: 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.rank-item:hover[b-tnvxivgpym] {
    background: rgba(0, 193, 255, 0.1);
    border-left-color: #00c1ff;
    transform: translateX(3px);
}

.rank-number[b-tnvxivgpym] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;
}

.rank-number.rank-1[b-tnvxivgpym] {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #0f1b39;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.rank-number.rank-2[b-tnvxivgpym] {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #0f1b39;
    box-shadow: 0 0 15px rgba(192, 192, 192, 0.5);
}

.rank-number.rank-3[b-tnvxivgpym] {
    background: linear-gradient(135deg, #cd7f32, #e6a85c);
    color: #0f1b39;
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.5);
}

.rank-number:not(.rank-1):not(.rank-2):not(.rank-3)[b-tnvxivgpym] {
    background: rgba(0, 193, 255, 0.2);
    color: #00c1ff;
}

.rank-name[b-tnvxivgpym] {
    flex: 1;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

.rank-info[b-tnvxivgpym] {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #a3b1d1;
}

.rank-info span[b-tnvxivgpym] {
    padding: 4px 8px;
    background: rgba(0, 193, 255, 0.1);
    border-radius: 4px;
}

.no-data[b-tnvxivgpym] {
    text-align: center;
    color: #a3b1d1;
    padding: 40px 20px;
    font-size: 14px;
}

/* 车站标记样式 */
:global(.station-marker)[b-tnvxivgpym] {
    background: transparent;
    border: none;
}

:global(.station-marker-inner)[b-tnvxivgpym] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #00c1ff, #00d49a);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 4px 12px rgba(0, 193, 255, 0.6);
    border: 2px solid #ffffff;
    transition: all 0.3s ease;
}

:global(.station-marker-inner:hover)[b-tnvxivgpym] {
    transform: rotate(-45deg) scale(1.2);
    box-shadow: 0 6px 16px rgba(0, 193, 255, 0.8);
}

:global(.station-marker-inner i)[b-tnvxivgpym] {
    color: #ffffff;
    font-size: 20px;
    transform: rotate(45deg);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 车站弹出框样式 */
:global(.station-popup)[b-tnvxivgpym] {
    font-family: 'Microsoft YaHei', Arial, sans-serif;
}

:global(.station-popup-title)[b-tnvxivgpym] {
    font-size: 14px;
    font-weight: bold;
    color: #00c1ff;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(0, 193, 255, 0.3);
}

:global(.station-popup-info)[b-tnvxivgpym] {
    font-size: 12px;
    color: #333;
}

:global(.station-popup-info div)[b-tnvxivgpym] {
    margin: 4px 0;
}

:global(.station-popup-info strong)[b-tnvxivgpym] {
    color: #00c1ff;
}

/* 设备统计样式 */
:global(.device-stats)[b-tnvxivgpym] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 193, 255, 0.2);
}

:global(.device-stat-title)[b-tnvxivgpym] {
    font-size: 13px;
    font-weight: 600;
    color: #00c1ff;
    margin-bottom: 8px;
}

:global(.device-stat-row)[b-tnvxivgpym] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
}

:global(.device-stat-label)[b-tnvxivgpym] {
    color: #666;
    font-weight: 500;
}

:global(.device-stat-value)[b-tnvxivgpym] {
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 30px;
    text-align: center;
}

:global(.device-stat-value.total)[b-tnvxivgpym] {
    color: #00c1ff;
    background: rgba(0, 193, 255, 0.1);
}

:global(.device-stat-value.normal)[b-tnvxivgpym] {
    color: #00d49a;
    background: rgba(0, 212, 154, 0.1);
}

:global(.device-stat-value.fault)[b-tnvxivgpym] {
    color: #ff4757;
    background: rgba(255, 71, 87, 0.1);
}

:global(.device-stat-value.offline)[b-tnvxivgpym] {
    color: #999;
    background: rgba(153, 153, 153, 0.1);
}

/* Leaflet Popup 样式优化 */
:global(.leaflet-popup-content-wrapper)[b-tnvxivgpym] {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

:global(.leaflet-popup-tip)[b-tnvxivgpym] {
    background: rgba(255, 255, 255, 0.98);
}

/* /Components/Public/DeviceAnalysis.razor.rz.scp.css */

.analysis-dashboard[b-qoxjdrh44v] {
    width: 100%;
    min-width: 1600px;
    height: 100vh;
    background: linear-gradient(135deg, #0a1628 0%, #1a2a45 100%);
    overflow: hidden; /* 改为 hidden，防止滚动条出现 */
    position: relative;
}

.navbar[b-qoxjdrh44v] {
    height: 80px;
    background: linear-gradient(135deg, rgba(16, 26, 53, 0.95), rgba(24, 39, 75, 0.95));
    border-bottom: 2px solid rgba(0, 193, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    flex-shrink: 0; /* 防止压缩 */
}

.menu-left[b-qoxjdrh44v] {
    display: flex;
    gap: 10px;
    z-index: 10;
}

.menu-btn[b-qoxjdrh44v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(0, 193, 255, 0.1);
    border: 1px solid rgba(0, 193, 255, 0.3);
    border-radius: 8px;
    color: #00c1ff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.menu-btn:hover[b-qoxjdrh44v] {
    background: rgba(0, 193, 255, 0.2);
    border-color: rgba(0, 193, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 193, 255, 0.3);
}

.menu-btn.active[b-qoxjdrh44v] {
    background: linear-gradient(135deg, rgba(0, 193, 255, 0.3), rgba(0, 212, 154, 0.3));
    border-color: #00c1ff;
    box-shadow: 0 0 20px rgba(0, 193, 255, 0.5);
}

.menu-btn i[b-qoxjdrh44v] {
    font-size: 20px;
}

.system-title-container[b-qoxjdrh44v] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
}

.system-title[b-qoxjdrh44v] {
    font-size: 28px;
    font-weight: bold;
    background: linear-gradient(135deg, #00c1ff, #00d49a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 4px;
    white-space: nowrap;
}

.system-subtitle[b-qoxjdrh44v] {
    font-size: 12px;
    color: rgba(0, 193, 255, 0.7);
    letter-spacing: 2px;
    margin-top: 5px;
    white-space: nowrap;
}

.navbar-right[b-qoxjdrh44v] {
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
}

.datetime[b-qoxjdrh44v] {
    text-align: right;
}

.time[b-qoxjdrh44v] {
    font-size: 24px;
    font-weight: bold;
    color: #00c1ff;
    font-family: 'Consolas', monospace;
}

.date[b-qoxjdrh44v] {
    font-size: 12px;
    color: rgba(0, 193, 255, 0.7);
    margin-top: 2px;
}

.analysis-content[b-qoxjdrh44v] {
    padding: 20px;
    max-width: 1920px;
    margin: 0 auto;
    height: calc(100vh - 80px); /* 减去导航栏高度 */
    overflow-y: auto; /* 只在内容区域滚动 */
    overflow-x: hidden;
}

/* 自定义滚动条样式 */
.analysis-content[b-qoxjdrh44v]::-webkit-scrollbar {
    width: 8px;
}

.analysis-content[b-qoxjdrh44v]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.analysis-content[b-qoxjdrh44v]::-webkit-scrollbar-thumb {
    background: rgba(0, 193, 255, 0.3);
    border-radius: 4px;
}

.analysis-content[b-qoxjdrh44v]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 193, 255, 0.5);
}

.metrics-row[b-qoxjdrh44v] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.metric-card[b-qoxjdrh44v] {
    position: relative;
    background: rgba(16, 26, 53, 0.8);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(0, 193, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    overflow: hidden; /* 防止伪元素溢出 */
}

.metric-card:hover[b-qoxjdrh44v] {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.metric-icon[b-qoxjdrh44v] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0; /* 防止压缩 */
}

.metric-card.blue .metric-icon[b-qoxjdrh44v] {
    background: linear-gradient(135deg, rgba(0, 193, 255, 0.3), rgba(0, 193, 255, 0.1));
    color: #00c1ff;
    box-shadow: 0 0 20px rgba(0, 193, 255, 0.3);
}

.metric-card.green .metric-icon[b-qoxjdrh44v] {
    background: linear-gradient(135deg, rgba(0, 212, 154, 0.3), rgba(0, 212, 154, 0.1));
    color: #00d49a;
    box-shadow: 0 0 20px rgba(0, 212, 154, 0.3);
}

.metric-card.orange .metric-icon[b-qoxjdrh44v] {
    background: linear-gradient(135deg, rgba(255, 170, 51, 0.3), rgba(255, 170, 51, 0.1));
    color: #ffaa33;
    box-shadow: 0 0 20px rgba(255, 170, 51, 0.3);
}

.metric-card.red .metric-icon[b-qoxjdrh44v] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.3), rgba(255, 71, 87, 0.1));
    color: #ff4757;
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
}

.metric-info[b-qoxjdrh44v] {
    flex: 1;
    min-width: 0; /* 防止文本溢出 */
}

.metric-label[b-qoxjdrh44v] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 5px;
}

.metric-value[b-qoxjdrh44v] {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    font-family: 'Consolas', monospace;
    margin-bottom: 5px;
}

.metric-trend[b-qoxjdrh44v] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.trend-up[b-qoxjdrh44v] {
    color: #00d49a;
}

.trend-down[b-qoxjdrh44v] {
    color: #ff4757;
}

/* 图表行 */
.charts-row[b-qoxjdrh44v] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.chart-panel[b-qoxjdrh44v] {
    background: rgba(16, 26, 53, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(0, 193, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: fadeInUp-b-qoxjdrh44v 0.6s ease-out;
    transition: all 0.3s ease;
}

.chart-panel:hover[b-qoxjdrh44v] {
    box-shadow: 0 8px 32px rgba(0, 193, 255, 0.3),
                0 0 60px rgba(0, 193, 255, 0.1);
    transform: translateY(-2px);
    border-color: rgba(0, 193, 255, 0.4);
}

/* 面板进入动画 */
@keyframes fadeInUp-b-qoxjdrh44v {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 为不同位置的图表添加延迟动画 */
.charts-row:nth-child(2) .chart-panel:nth-child(1)[b-qoxjdrh44v] {
    animation-delay: 0.1s;
    animation-fill-mode: both; /* 保持初始状态 */
}

.charts-row:nth-child(2) .chart-panel:nth-child(2)[b-qoxjdrh44v] {
    animation-delay: 0.2s;
    animation-fill-mode: both;
}

.charts-row:nth-child(3) .chart-panel:nth-child(1)[b-qoxjdrh44v] {
    animation-delay: 0.3s;
    animation-fill-mode: both;
}

.charts-row:nth-child(3) .chart-panel:nth-child(2)[b-qoxjdrh44v] {
    animation-delay: 0.4s;
    animation-fill-mode: both;
}

.panel-header[b-qoxjdrh44v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: rgba(0, 193, 255, 0.1);
    border-bottom: 1px solid rgba(0, 193, 255, 0.2);
    color: #00c1ff;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.panel-header i[b-qoxjdrh44v] {
    font-size: 24px;
    animation: iconPulse-b-qoxjdrh44v 2s ease-in-out infinite;
}

/* 图标脉冲动画 */
@keyframes iconPulse-b-qoxjdrh44v {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* 面板标题光泽动画 */
.panel-header[b-qoxjdrh44v]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 193, 255, 0.3),
        transparent
    );
    animation: shine-b-qoxjdrh44v 3s infinite;
}

@keyframes shine-b-qoxjdrh44v {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

.panel-body[b-qoxjdrh44v] {
    padding: 20px;
}

.chart[b-qoxjdrh44v] {
    width: 100%;
    height: 350px;
}

.chart-large[b-qoxjdrh44v] {
    width: 100%;
    height: 400px;
}

/* 指标卡片动画 */
.metrics-row .metric-card:nth-child(1)[b-qoxjdrh44v] {
    animation: fadeInUp-b-qoxjdrh44v 0.5s ease-out;
}

.metrics-row .metric-card:nth-child(2)[b-qoxjdrh44v] {
    animation: fadeInUp-b-qoxjdrh44v 0.5s ease-out 0.1s;
    animation-fill-mode: both;
}

.metrics-row .metric-card:nth-child(3)[b-qoxjdrh44v] {
    animation: fadeInUp-b-qoxjdrh44v 0.5s ease-out 0.2s;
    animation-fill-mode: both;
}

.metrics-row .metric-card:nth-child(4)[b-qoxjdrh44v] {
    animation: fadeInUp-b-qoxjdrh44v 0.5s ease-out 0.3s;
    animation-fill-mode: both;
}

/* 待修设备卡片警告闪烁 */
.metric-card.red .metric-icon[b-qoxjdrh44v] {
    animation: warningBlink-b-qoxjdrh44v 2s ease-in-out infinite;
}

@keyframes warningBlink-b-qoxjdrh44v {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 30px rgba(255, 71, 87, 0.6);
    }
}

/* 待检设备卡片警告脉冲 */
.metric-card.orange .metric-icon[b-qoxjdrh44v] {
    animation: warningPulse-b-qoxjdrh44v 2.5s ease-in-out infinite;
}

@keyframes warningPulse-b-qoxjdrh44v {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(255, 170, 51, 0.3);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 25px rgba(255, 170, 51, 0.5);
    }
}

/* 指标卡片悬停效果 */
.metric-card:hover .metric-value[b-qoxjdrh44v] {
    animation: valueBounce-b-qoxjdrh44v 0.6s ease-out;
}

@keyframes valueBounce-b-qoxjdrh44v {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05); /* 减小缩放比例，从 1.1 改为 1.05 */
    }
}

/* 趋势指示器动画 */
.trend-up[b-qoxjdrh44v] {
    animation: bounceUp-b-qoxjdrh44v 1s ease-out;
}

.trend-down[b-qoxjdrh44v] {
    animation: bounceDown-b-qoxjdrh44v 1s ease-out;
}

@keyframes bounceUp-b-qoxjdrh44v {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }
    60% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounceDown-b-qoxjdrh44v {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    60% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 健康率高亮效果 */
.metric-card.green:hover[b-qoxjdrh44v] {
    box-shadow: 0 8px 24px rgba(0, 212, 154, 0.4),
                0 0 60px rgba(0, 212, 154, 0.2);
}

.metric-card.red:hover[b-qoxjdrh44v] {
    box-shadow: 0 8px 24px rgba(255, 71, 87, 0.4),
                0 0 60px rgba(255, 71, 87, 0.2);
}

.metric-card.orange:hover[b-qoxjdrh44v] {
    box-shadow: 0 8px 24px rgba(255, 170, 51, 0.4),
                0 0 60px rgba(255, 170, 51, 0.2);
}

/* 加载状态 */
.chart-loading[b-qoxjdrh44v] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    color: #00c1ff;
    font-size: 16px;
}

.chart-loading[b-qoxjdrh44v]::after {
    content: '';
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border: 4px solid rgba(0, 193, 255, 0.2);
    border-top-color: #00c1ff;
    border-radius: 50%;
    animation: spin-b-qoxjdrh44v 1s linear infinite;
}

@keyframes spin-b-qoxjdrh44v {
    to {
        transform: rotate(360deg);
    }
}

/* 数据卡片渐变背景动画 */
.metric-card[b-qoxjdrh44v]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(0, 193, 255, 0.1) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none; /* 防止阻挡鼠标事件 */
    z-index: 0;
}

.metric-card:hover[b-qoxjdrh44v]::before {
    opacity: 1;
    animation: rotate-b-qoxjdrh44v 10s linear infinite;
}

/* 确保内容在伪元素之上 */
.metric-card > *[b-qoxjdrh44v] {
    position: relative;
    z-index: 1;
}

@keyframes rotate-b-qoxjdrh44v {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 响应式优化 */
@media (max-width: 1600px) {
    .chart[b-qoxjdrh44v] {
        height: 300px;
    }
    
    .chart-large[b-qoxjdrh44v] {
        height: 350px;
    }
}

@media (max-width: 1400px) {
    .charts-row[b-qoxjdrh44v] {
        grid-template-columns: 1fr;
    }
    
    .chart[b-qoxjdrh44v] {
        height: 350px;
    }
    
    .chart-large[b-qoxjdrh44v] {
        height: 400px;
    }
}

/* 空状态样式 */
.empty-state[b-qoxjdrh44v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 350px;
    color: rgba(163, 177, 209, 0.6);
}

.empty-state i[b-qoxjdrh44v] {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.empty-state p[b-qoxjdrh44v] {
    font-size: 16px;
}

/* /Components/Public/Login.razor.rz.scp.css */
.login-page[b-cjjt9s2dnw] {
    background: url('images/login.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    height: 100vh;
    overflow: hidden;
}

[b-cjjt9s2dnw] .container {
    --login-max-width: 540px;
    --login-padding-x: 1.5rem;
    --login-padding-y: .75rem;
    --bs-border-radius: 23px;
    max-width: var(--login-max-width);
    margin: 0 auto;
}

.login-title1[b-cjjt9s2dnw] {
    font-family: SimHei, sans-serif;
    font-size: 1.5rem;
    color: #FFE8D8;
    text-shadow: 0 8px 10px #000;
}

.login-title2[b-cjjt9s2dnw] {
    font-family: SimHei, sans-serif;
    font-size: 3rem;
    color: #FFE8D8;
    text-shadow: 0 8px 10px #000;
}

[b-cjjt9s2dnw] h4 {
    margin-bottom: 1.6rem;
}

[b-cjjt9s2dnw] .form-control {
    padding: 0.75rem 1.5rem;
    font-size: .875rem;
    margin-bottom: 1rem;
}

[b-cjjt9s2dnw] .btn {
    --bs-btn-padding-x: var(--login-padding-x);
    --bs-btn-padding-y: var(--login-padding-y);
    width: 100%;
    margin-bottom: 1rem;
}

    [b-cjjt9s2dnw] .btn:first-of-type {
        margin-bottom: 0;
    }

[b-cjjt9s2dnw] .form-check {
    padding: var(--login-padding-y) var(--login-padding-x);
    margin-bottom: 1rem;
}

.vcode[b-cjjt9s2dnw] {
    height: 46px;
    object-fit: contain;
    cursor: pointer;
}
/* /Components/Public/LoginTech.razor.rz.scp.css */
/* 科技感高铁设备维保登录页面样式 */

.tech-login-container[b-pv77ruqhqy] {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #1a1a2e 100%);
    overflow: hidden;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}


/* 背景动画效果 */
.background-animations[b-pv77ruqhqy] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

/* 列车车厢动画 */
.train-carriage[b-pv77ruqhqy] {
    position: absolute;
    width: 60px;
    height: 20px;
    background: linear-gradient(45deg, #2c3e50, #34495e);
    border: 2px solid #FFD700;
    border-radius: 8px;
    top: 30%;
    left: -80px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    animation: trainMove-b-pv77ruqhqy 8s linear infinite;
}

.train-carriage:nth-child(2)[b-pv77ruqhqy] {
    top: 50%;
    animation-delay: 2s;
    width: 50px;
    height: 18px;
}

.train-carriage:nth-child(3)[b-pv77ruqhqy] {
    top: 70%;
    animation-delay: 4s;
    width: 55px;
    height: 19px;
}

@keyframes trainMove-b-pv77ruqhqy {
    0% { left: -80px; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: calc(100% + 80px); opacity: 0; }
}

/* 科技粒子效果 */
.particles[b-pv77ruqhqy] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.particle[b-pv77ruqhqy] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00d4ff;
    border-radius: 50%;
    box-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 30px #00d4ff;
    animation: particleFloat-b-pv77ruqhqy 6s ease-in-out infinite;
}

.particle:nth-child(odd)[b-pv77ruqhqy] {
    background: #ff6b6b;
    box-shadow: 0 0 10px #ff6b6b, 0 0 20px #ff6b6b, 0 0 30px #ff6b6b;
}

@keyframes particleFloat-b-pv77ruqhqy {
    0%, 100% {
        transform: translateY(100vh) translateX(0px);
        opacity: 0;
    }
    50% {
        transform: translateY(50vh) translateX(20px);
        opacity: 1;
    }
}

/* 主登录面板 */
.login-panel[b-pv77ruqhqy] {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 10;
    margin-top: 10vh;
}

/* 顶部标题区域 */
.header-section[b-pv77ruqhqy] {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

.system-icon[b-pv77ruqhqy] {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.system-icon i[b-pv77ruqhqy] {
    font-size: 3rem;
    color: #00d4ff;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.6));
    animation: iconPulse-b-pv77ruqhqy 3s ease-in-out infinite;
}

.icon-glow[b-pv77ruqhqy] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse-b-pv77ruqhqy 3s ease-in-out infinite;
}

@keyframes iconPulse-b-pv77ruqhqy {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes glowPulse-b-pv77ruqhqy {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

.system-title[b-pv77ruqhqy] {
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    background: linear-gradient(45deg, #00d4ff, #0099cc, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.system-subtitle[b-pv77ruqhqy] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0 0 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 登录模式指示器 */
.login-mode-indicator[b-pv77ruqhqy] {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mode-active[b-pv77ruqhqy], .mode-switch[b-pv77ruqhqy] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}

.mode-active[b-pv77ruqhqy] {
    background: linear-gradient(45deg, #00d4ff, #0099cc);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}

.mode-switch[b-pv77ruqhqy] {
    color: rgba(255, 255, 255, 0.6);
}

.mode-switch:hover[b-pv77ruqhqy] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.mode-active i[b-pv77ruqhqy], .mode-switch i[b-pv77ruqhqy] {
    margin-right: 0.5rem;
}

/* 科技表单样式 */
.tech-form[b-pv77ruqhqy] {
    margin-bottom: 1.5rem;
}

.input-group-tech[b-pv77ruqhqy] {
    position: relative;
    margin-bottom: 1.5rem;
}

.input-icon[b-pv77ruqhqy] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    z-index: 2;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.form-control-tech[b-pv77ruqhqy] {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #ffffff;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.form-control-tech:focus[b-pv77ruqhqy] {
    outline: none;
    border-color: #00d4ff;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.form-control-tech:focus + .input-border[b-pv77ruqhqy],
.form-control-tech:focus + .send-code-btn + .input-border[b-pv77ruqhqy],
.input-group-tech:focus-within .input-border[b-pv77ruqhqy] {
    width: 100%;
    opacity: 1;
}

.input-border[b-pv77ruqhqy] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00d4ff, #0099cc);
    border-radius: 1px;
    transition: all 0.3s ease;
    opacity: 0;
}

/* 验证码组特殊样式 */
.vcode-group[b-pv77ruqhqy] {
    position: relative;
}

.vcode-group .form-control-tech[b-pv77ruqhqy] {
    padding-right: 130px; /* 为验证码图片留出空间 */
    margin-bottom: 0;
}

/* 短信登录验证码输入框样式 */
.sms-code-group .form-control-tech[b-pv77ruqhqy] {
    padding-right: 105px; /* 为发送验证码按钮留出空间 */
}

.vcode-display[b-pv77ruqhqy] {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    width: 120px;
    height: 48px;
}

.vcode-display:hover[b-pv77ruqhqy] {
    border-color: #00d4ff;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

.vcode-tech[b-pv77ruqhqy] {
    width: 120px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.vcode-overlay[b-pv77ruqhqy] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 0%, rgba(0, 212, 255, 0.1) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vcode-display:hover .vcode-overlay[b-pv77ruqhqy] {
    opacity: 1;
}

/* 发送验证码按钮 */
.send-code-btn[b-pv77ruqhqy] {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(45deg, #ff6b6b, #ee5a52);
    border: none;
    color: white;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    height: 36px;
    min-width: 90px;
}


.send-code-btn:disabled[b-pv77ruqhqy] {
    background: rgba(255, 255, 255, 0.2);
    cursor: not-allowed;
    color: rgba(255, 255, 255, 0.5);
}

/* 登录按钮 */
.login-actions[b-pv77ruqhqy] {
    margin-top: 2rem;
}

.login-btn-tech[b-pv77ruqhqy] {
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(45deg, #00d4ff, #0099cc, #00a8ff);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
}

.login-btn-tech:hover:not(:disabled)[b-pv77ruqhqy] {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 212, 255, 0.5);
}

.login-btn-tech:active:not(:disabled)[b-pv77ruqhqy] {
    transform: translateY(-1px);
}

.login-btn-tech:disabled[b-pv77ruqhqy] {
    cursor: not-allowed;
    opacity: 0.7;
}

.login-btn-tech i[b-pv77ruqhqy] {
    margin-right: 0.5rem;
    font-size: 1.2rem;
}

/* 加载动画 */
.loading-spinner[b-pv77ruqhqy] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin-b-pv77ruqhqy 1s ease-in-out infinite;
    margin-right: 0.5rem;
}

@keyframes spin-b-pv77ruqhqy {
    to { transform: rotate(360deg); }
}

/* 错误消息 */
.error-message[b-pv77ruqhqy] {
    background: linear-gradient(45deg, rgba(255, 107, 107, 0.1), rgba(238, 90, 82, 0.1));
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    color: #ff6b6b;
    font-weight: 500;
}

.error-message i[b-pv77ruqhqy] {
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

/* 底部信息 */
.footer-info[b-pv77ruqhqy] {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.system-status[b-pv77ruqhqy] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.status-dot[b-pv77ruqhqy] {
    width: 8px;
    height: 8px;
    background: #00d4ff;
    border-radius: 50%;
    margin-right: 0.5rem;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
    animation: statusPulse-b-pv77ruqhqy 2s ease-in-out infinite;
}

@keyframes statusPulse-b-pv77ruqhqy {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.copyright[b-pv77ruqhqy] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .login-panel[b-pv77ruqhqy] {
        margin: 1rem;
        padding: 1.5rem;
        margin-top: 5vh;
    }

    .system-title[b-pv77ruqhqy] {
        font-size: 1.8rem;
    }

    .system-icon i[b-pv77ruqhqy] {
        font-size: 2.5rem;
    }

    .login-mode-indicator[b-pv77ruqhqy] {
        flex-direction: column;
    }

    .mode-active[b-pv77ruqhqy], .mode-switch[b-pv77ruqhqy] {
        margin-bottom: 0.25rem;
    }

    .vcode-group .form-control-tech[b-pv77ruqhqy] {
        padding-right: 125px; /* 移动端稍微调整间距 */
    }

    .vcode-display[b-pv77ruqhqy] {
        width: 115px;
        height: 46px;
    }

    .sms-code-group .form-control-tech[b-pv77ruqhqy] {
        padding-right: 100px; /* 移动端调整发送按钮间距 */
    }

    .send-code-btn[b-pv77ruqhqy] {
        min-width: 85px;
        height: 34px;
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }


    .train-carriage[b-pv77ruqhqy] {
        width: 40px;
        height: 15px;
    }
}

@media (max-width: 480px) {
    .login-panel[b-pv77ruqhqy] {
        margin: 0.5rem;
        padding: 1rem;
    }

    .system-title[b-pv77ruqhqy] {
        font-size: 1.5rem;
    }

    .header-section[b-pv77ruqhqy] {
        margin-bottom: 1.5rem;
    }

    .form-control-tech[b-pv77ruqhqy] {
        padding: 0.875rem 0.875rem 0.875rem 2.75rem;
        font-size: 0.9rem;
    }

    .input-icon[b-pv77ruqhqy] {
        left: 0.75rem;
        font-size: 1rem;
    }

    .sms-code-group .form-control-tech[b-pv77ruqhqy] {
        padding-right: 90px; /* 小屏幕调整发送按钮间距 */
    }

    .send-code-btn[b-pv77ruqhqy] {
        min-width: 75px;
        height: 32px;
        font-size: 0.75rem;
        padding: 0.3rem 0.5rem;
    }
}

/* 深色模式优化 */
@media (prefers-color-scheme: dark) {
    .login-panel[b-pv77ruqhqy] {
        background: rgba(0, 0, 0, 0.3);
        border-color: rgba(255, 255, 255, 0.15);
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .system-title[b-pv77ruqhqy] {
        -webkit-text-fill-color: #ffffff;
        color: #ffffff;
    }

    .form-control-tech[b-pv77ruqhqy] {
        border-width: 3px;
    }
}

/* 减少动画选项支持 */
@media (prefers-reduced-motion: reduce) {
    *[b-pv77ruqhqy] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Public/PersonnelAnalysis.razor.rz.scp.css */
.analysis-dashboard[b-r24r77jbzr] {
    width: 100%;
    min-width: 1600px;
    height: 100vh;
    background: linear-gradient(135deg, #0a1628 0%, #1a2a45 100%);
    overflow: hidden; /* 改为 hidden，防止滚动条出现 */
    position: relative;
}

.navbar[b-r24r77jbzr] {
    height: 80px;
    background: linear-gradient(135deg, rgba(16, 26, 53, 0.95), rgba(24, 39, 75, 0.95));
    border-bottom: 2px solid rgba(0, 193, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    flex-shrink: 0; /* 防止压缩 */
}

.menu-left[b-r24r77jbzr] {
    display: flex;
    gap: 10px;
    z-index: 10;
}

.menu-btn[b-r24r77jbzr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(0, 193, 255, 0.1);
    border: 1px solid rgba(0, 193, 255, 0.3);
    border-radius: 8px;
    color: #00c1ff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.menu-btn:hover[b-r24r77jbzr] {
    background: rgba(0, 193, 255, 0.2);
    border-color: rgba(0, 193, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 193, 255, 0.3);
}

.menu-btn.active[b-r24r77jbzr] {
    background: linear-gradient(135deg, rgba(0, 193, 255, 0.3), rgba(0, 212, 154, 0.3));
    border-color: #00c1ff;
    box-shadow: 0 0 20px rgba(0, 193, 255, 0.5);
}

.menu-btn i[b-r24r77jbzr] {
    font-size: 20px;
}

.system-title-container[b-r24r77jbzr] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
}

.system-title[b-r24r77jbzr] {
    font-size: 28px;
    font-weight: bold;
    background: linear-gradient(135deg, #00c1ff, #00d49a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 4px;
    white-space: nowrap;
}

.system-subtitle[b-r24r77jbzr] {
    font-size: 12px;
    color: rgba(0, 193, 255, 0.7);
    letter-spacing: 2px;
    margin-top: 5px;
    white-space: nowrap;
}

.navbar-right[b-r24r77jbzr] {
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
}

.datetime[b-r24r77jbzr] {
    text-align: right;
}

.time[b-r24r77jbzr] {
    font-size: 24px;
    font-weight: bold;
    color: #00c1ff;
    font-family: 'Consolas', monospace;
}

.date[b-r24r77jbzr] {
    font-size: 12px;
    color: rgba(0, 193, 255, 0.7);
    margin-top: 2px;
}

.analysis-content[b-r24r77jbzr] {
    padding: 20px;
    max-width: 1920px;
    margin: 0 auto;
    height: calc(100vh - 80px); /* 减去导航栏高度 */
    overflow-y: auto; /* 只在内容区域滚动 */
    overflow-x: hidden;
}

/* 自定义滚动条样式 */
.analysis-content[b-r24r77jbzr]::-webkit-scrollbar {
    width: 8px;
}

.analysis-content[b-r24r77jbzr]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.analysis-content[b-r24r77jbzr]::-webkit-scrollbar-thumb {
    background: rgba(0, 193, 255, 0.3);
    border-radius: 4px;
}

.analysis-content[b-r24r77jbzr]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 193, 255, 0.5);
}

.metrics-row[b-r24r77jbzr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.metric-card[b-r24r77jbzr] {
    position: relative;
    background: rgba(16, 26, 53, 0.8);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(0, 193, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    overflow: hidden; /* 防止伪元素溢出 */
}

.metric-card:hover[b-r24r77jbzr] {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.metric-icon[b-r24r77jbzr] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0; /* 防止压缩 */
}

.metric-card.blue .metric-icon[b-r24r77jbzr] {
    background: linear-gradient(135deg, rgba(0, 193, 255, 0.3), rgba(0, 193, 255, 0.1));
    color: #00c1ff;
    box-shadow: 0 0 20px rgba(0, 193, 255, 0.3);
}

.metric-card.green .metric-icon[b-r24r77jbzr] {
    background: linear-gradient(135deg, rgba(0, 212, 154, 0.3), rgba(0, 212, 154, 0.1));
    color: #00d49a;
    box-shadow: 0 0 20px rgba(0, 212, 154, 0.3);
}

.metric-card.orange .metric-icon[b-r24r77jbzr] {
    background: linear-gradient(135deg, rgba(255, 170, 51, 0.3), rgba(255, 170, 51, 0.1));
    color: #ffaa33;
    box-shadow: 0 0 20px rgba(255, 170, 51, 0.3);
}

.metric-card.red .metric-icon[b-r24r77jbzr] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.3), rgba(255, 71, 87, 0.1));
    color: #ff4757;
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
}

.metric-card.purple .metric-icon[b-r24r77jbzr] {
    background: linear-gradient(135deg, rgba(156, 90, 255, 0.3), rgba(156, 90, 255, 0.1));
    color: #9c5aff;
    box-shadow: 0 0 20px rgba(156, 90, 255, 0.3);
}

.metric-info[b-r24r77jbzr] {
    flex: 1;
    min-width: 0; /* 防止文本溢出 */
}

.metric-label[b-r24r77jbzr] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 5px;
}

.metric-value[b-r24r77jbzr] {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    font-family: 'Consolas', monospace;
    margin-bottom: 5px;
}

.metric-trend[b-r24r77jbzr] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.trend-up[b-r24r77jbzr] {
    color: #00d49a;
    font-weight: 600;
}

.trend-down[b-r24r77jbzr] {
    color: #ff4757;
    font-weight: 600;
}

.trend-normal[b-r24r77jbzr] {
    color: #a3b1d1;
    font-weight: 600;
}

/* 图表行 */
.charts-row[b-r24r77jbzr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.chart-panel[b-r24r77jbzr] {
    background: rgba(16, 26, 53, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(0, 193, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: fadeInUp-b-r24r77jbzr 0.6s ease-out;
    transition: all 0.3s ease;
}

.chart-panel:hover[b-r24r77jbzr] {
    box-shadow: 0 8px 32px rgba(0, 193, 255, 0.3),
                0 0 60px rgba(0, 193, 255, 0.1);
    transform: translateY(-2px);
    border-color: rgba(0, 193, 255, 0.4);
}

/* 面板进入动画 */
@keyframes fadeInUp-b-r24r77jbzr {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 为不同位置的图表添加延迟动画 */
.charts-row:nth-child(2) .chart-panel:nth-child(1)[b-r24r77jbzr] {
    animation-delay: 0.1s;
    animation-fill-mode: both; /* 保持初始状态 */
}

.charts-row:nth-child(2) .chart-panel:nth-child(2)[b-r24r77jbzr] {
    animation-delay: 0.2s;
    animation-fill-mode: both;
}

.charts-row:nth-child(3) .chart-panel:nth-child(1)[b-r24r77jbzr] {
    animation-delay: 0.3s;
    animation-fill-mode: both;
}

.charts-row:nth-child(3) .chart-panel:nth-child(2)[b-r24r77jbzr] {
    animation-delay: 0.4s;
    animation-fill-mode: both;
}

.panel-header[b-r24r77jbzr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: rgba(0, 193, 255, 0.1);
    border-bottom: 1px solid rgba(0, 193, 255, 0.2);
    color: #00c1ff;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.panel-header i[b-r24r77jbzr] {
    font-size: 24px;
    animation: iconPulse-b-r24r77jbzr 2s ease-in-out infinite;
}

/* 图标脉冲动画 */
@keyframes iconPulse-b-r24r77jbzr {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* 面板标题光泽动画 */
.panel-header[b-r24r77jbzr]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 193, 255, 0.3),
        transparent
    );
    animation: shine-b-r24r77jbzr 3s infinite;
}

@keyframes shine-b-r24r77jbzr {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

.panel-body[b-r24r77jbzr] {
    padding: 20px;
}

.chart[b-r24r77jbzr] {
    width: 100%;
    height: 350px;
}

.chart-large[b-r24r77jbzr] {
    width: 100%;
    height: 400px;
}

/* 指标卡片动画 */
.metrics-row .metric-card:nth-child(1)[b-r24r77jbzr] {
    animation: fadeInUp-b-r24r77jbzr 0.5s ease-out;
}

.metrics-row .metric-card:nth-child(2)[b-r24r77jbzr] {
    animation: fadeInUp-b-r24r77jbzr 0.5s ease-out 0.1s;
    animation-fill-mode: both;
}

.metrics-row .metric-card:nth-child(3)[b-r24r77jbzr] {
    animation: fadeInUp-b-r24r77jbzr 0.5s ease-out 0.2s;
    animation-fill-mode: both;
}

.metrics-row .metric-card:nth-child(4)[b-r24r77jbzr] {
    animation: fadeInUp-b-r24r77jbzr 0.5s ease-out 0.3s;
    animation-fill-mode: both;
}

/* 优秀人员卡片星光闪烁 */
.metric-card.purple .metric-icon[b-r24r77jbzr] {
    animation: starShine-b-r24r77jbzr 2s ease-in-out infinite;
}

@keyframes starShine-b-r24r77jbzr {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(156, 90, 255, 0.3);
        transform: rotate(0deg);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 30px rgba(156, 90, 255, 0.6);
        transform: rotate(10deg);
    }
}

/* 执行任务中卡片脉冲 */
.metric-card.orange .metric-icon[b-r24r77jbzr] {
    animation: taskPulse-b-r24r77jbzr 2.5s ease-in-out infinite;
}

@keyframes taskPulse-b-r24r77jbzr {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(255, 170, 51, 0.3);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 25px rgba(255, 170, 51, 0.5);
    }
}

/* 在岗人员卡片呼吸灯 */
.metric-card.green .metric-icon[b-r24r77jbzr] {
    animation: breathe-b-r24r77jbzr 3s ease-in-out infinite;
}

@keyframes breathe-b-r24r77jbzr {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(0, 212, 154, 0.3);
    }
    50% {
        opacity: 0.85;
        box-shadow: 0 0 25px rgba(0, 212, 154, 0.5);
    }
}

/* 指标卡片悬停效果 */
.metric-card:hover .metric-value[b-r24r77jbzr] {
    animation: valueBounce-b-r24r77jbzr 0.6s ease-out;
}

@keyframes valueBounce-b-r24r77jbzr {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05); /* 减小缩放比例，从 1.1 改为 1.05 */
    }
}

/* 趋势指示器动画 */
.trend-up[b-r24r77jbzr] {
    animation: bounceUp-b-r24r77jbzr 1s ease-out;
}

.trend-down[b-r24r77jbzr] {
    animation: bounceDown-b-r24r77jbzr 1s ease-out;
}

@keyframes bounceUp-b-r24r77jbzr {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }
    60% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounceDown-b-r24r77jbzr {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    60% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 各卡片特定悬停辉光 */
.metric-card.blue:hover[b-r24r77jbzr] {
    box-shadow: 0 8px 24px rgba(0, 193, 255, 0.4),
                0 0 60px rgba(0, 193, 255, 0.2);
}

.metric-card.green:hover[b-r24r77jbzr] {
    box-shadow: 0 8px 24px rgba(0, 212, 154, 0.4),
                0 0 60px rgba(0, 212, 154, 0.2);
}

.metric-card.orange:hover[b-r24r77jbzr] {
    box-shadow: 0 8px 24px rgba(255, 170, 51, 0.4),
                0 0 60px rgba(255, 170, 51, 0.2);
}

.metric-card.purple:hover[b-r24r77jbzr] {
    box-shadow: 0 8px 24px rgba(156, 90, 255, 0.4),
                0 0 60px rgba(156, 90, 255, 0.2);
}

/* 加载状态 */
.chart-loading[b-r24r77jbzr] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    color: #00c1ff;
    font-size: 16px;
}

.chart-loading[b-r24r77jbzr]::after {
    content: '';
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border: 4px solid rgba(0, 193, 255, 0.2);
    border-top-color: #00c1ff;
    border-radius: 50%;
    animation: spin-b-r24r77jbzr 1s linear infinite;
}

@keyframes spin-b-r24r77jbzr {
    to {
        transform: rotate(360deg);
    }
}

/* 数据卡片渐变背景动画 */
.metric-card[b-r24r77jbzr]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(0, 193, 255, 0.1) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none; /* 防止阻挡鼠标事件 */
    z-index: 0;
}

.metric-card:hover[b-r24r77jbzr]::before {
    opacity: 1;
    animation: rotate-b-r24r77jbzr 10s linear infinite;
}

/* 确保内容在伪元素之上 */
.metric-card > *[b-r24r77jbzr] {
    position: relative;
    z-index: 1;
}

@keyframes rotate-b-r24r77jbzr {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 优秀徽章脉冲 */
.metric-card.purple .metric-value[b-r24r77jbzr] {
    position: relative;
}

.metric-card.purple .metric-value[b-r24r77jbzr]::after {
    content: '⭐';
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    animation: starBlink-b-r24r77jbzr 1.5s ease-in-out infinite;
}

@keyframes starBlink-b-r24r77jbzr {
    0%, 100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-50%) scale(1.2);
    }
}

/* 响应式优化 */
@media (max-width: 1600px) {
    .chart[b-r24r77jbzr] {
        height: 300px;
    }
    
    .chart-large[b-r24r77jbzr] {
        height: 350px;
    }
}

@media (max-width: 1400px) {
    .charts-row[b-r24r77jbzr] {
        grid-template-columns: 1fr;
    }
    
    .chart[b-r24r77jbzr] {
        height: 350px;
    }
    
    .chart-large[b-r24r77jbzr] {
        height: 400px;
    }
}

/* 空状态样式 */
.empty-state[b-r24r77jbzr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 350px;
    color: rgba(163, 177, 209, 0.6);
}

.empty-state i[b-r24r77jbzr] {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.empty-state p[b-r24r77jbzr] {
    font-size: 16px;
}

/* 效率等级徽章样式 */
.efficiency-badge[b-r24r77jbzr] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    margin-left: 5px;
}

.efficiency-badge.s[b-r24r77jbzr] {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.efficiency-badge.a[b-r24r77jbzr] {
    background: linear-gradient(135deg, #00d49a, #00b87a);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 212, 154, 0.5);
}

.efficiency-badge.b[b-r24r77jbzr] {
    background: linear-gradient(135deg, #00c1ff, #0099cc);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 193, 255, 0.5);
}

.efficiency-badge.c[b-r24r77jbzr] {
    background: linear-gradient(135deg, #ffaa33, #ff8800);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 170, 51, 0.5);
}

.efficiency-badge.d[b-r24r77jbzr] {
    background: linear-gradient(135deg, #ff4757, #ff3333);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.5);
}

/* /Components/Public/WorkOrderAnalysis.razor.rz.scp.css */
.analysis-dashboard[b-3hhg7c2mzf] {
    width: 100%;
    min-width: 1600px;
    height: 100vh;
    background: linear-gradient(135deg, #0a1628 0%, #1a2a45 100%);
    overflow: hidden; /* 改为 hidden，防止滚动条出现 */
    position: relative;
}

/* 导航栏样式 - 复用数据大屏样式 */
.navbar[b-3hhg7c2mzf] {
    height: 80px;
    background: linear-gradient(135deg, rgba(16, 26, 53, 0.95), rgba(24, 39, 75, 0.95));
    border-bottom: 2px solid rgba(0, 193, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    flex-shrink: 0; /* 防止压缩 */
}

.menu-left[b-3hhg7c2mzf] {
    display: flex;
    gap: 10px;
    z-index: 10;
}

.menu-btn[b-3hhg7c2mzf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(0, 193, 255, 0.1);
    border: 1px solid rgba(0, 193, 255, 0.3);
    border-radius: 8px;
    color: #00c1ff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.menu-btn:hover[b-3hhg7c2mzf] {
    background: rgba(0, 193, 255, 0.2);
    border-color: rgba(0, 193, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 193, 255, 0.3);
}

.menu-btn.active[b-3hhg7c2mzf] {
    background: linear-gradient(135deg, rgba(0, 193, 255, 0.3), rgba(0, 212, 154, 0.3));
    border-color: #00c1ff;
    box-shadow: 0 0 20px rgba(0, 193, 255, 0.5);
}

.menu-btn i[b-3hhg7c2mzf] {
    font-size: 20px;
}

.system-title-container[b-3hhg7c2mzf] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
}

.system-title[b-3hhg7c2mzf] {
    font-size: 28px;
    font-weight: bold;
    background: linear-gradient(135deg, #00c1ff, #00d49a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(0, 193, 255, 0.5);
    white-space: nowrap;
}

.system-subtitle[b-3hhg7c2mzf] {
    font-size: 12px;
    color: rgba(0, 193, 255, 0.7);
    letter-spacing: 2px;
    margin-top: 5px;
    white-space: nowrap;
}

.navbar-right[b-3hhg7c2mzf] {
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
}

.datetime[b-3hhg7c2mzf] {
    text-align: right;
}

.time[b-3hhg7c2mzf] {
    font-size: 24px;
    font-weight: bold;
    color: #00c1ff;
    font-family: 'Consolas', monospace;
}

.date[b-3hhg7c2mzf] {
    font-size: 12px;
    color: rgba(0, 193, 255, 0.7);
    margin-top: 2px;
}

/* 内容区域 */
.analysis-content[b-3hhg7c2mzf] {
    padding: 20px;
    max-width: 1920px;
    margin: 0 auto;
    height: calc(100vh - 80px); /* 减去导航栏高度 */
    overflow-y: auto; /* 只在内容区域滚动 */
    overflow-x: hidden;
}

/* 自定义滚动条样式 */
.analysis-content[b-3hhg7c2mzf]::-webkit-scrollbar {
    width: 8px;
}

.analysis-content[b-3hhg7c2mzf]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.analysis-content[b-3hhg7c2mzf]::-webkit-scrollbar-thumb {
    background: rgba(0, 193, 255, 0.3);
    border-radius: 4px;
}

.analysis-content[b-3hhg7c2mzf]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 193, 255, 0.5);
}

/* 指标卡片行 */
.metrics-row[b-3hhg7c2mzf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.metric-card[b-3hhg7c2mzf] {
    position: relative;
    background: rgba(16, 26, 53, 0.8);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(0, 193, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    overflow: hidden; /* 防止伪元素溢出 */
}

.metric-card:hover[b-3hhg7c2mzf] {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.metric-icon[b-3hhg7c2mzf] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0; /* 防止压缩 */
}

.metric-card.blue .metric-icon[b-3hhg7c2mzf] {
    background: linear-gradient(135deg, rgba(0, 193, 255, 0.3), rgba(0, 193, 255, 0.1));
    color: #00c1ff;
    box-shadow: 0 0 20px rgba(0, 193, 255, 0.3);
}

.metric-card.green .metric-icon[b-3hhg7c2mzf] {
    background: linear-gradient(135deg, rgba(0, 212, 154, 0.3), rgba(0, 212, 154, 0.1));
    color: #00d49a;
    box-shadow: 0 0 20px rgba(0, 212, 154, 0.3);
}

.metric-card.orange .metric-icon[b-3hhg7c2mzf] {
    background: linear-gradient(135deg, rgba(255, 170, 51, 0.3), rgba(255, 170, 51, 0.1));
    color: #ffaa33;
    box-shadow: 0 0 20px rgba(255, 170, 51, 0.3);
}

.metric-card.red .metric-icon[b-3hhg7c2mzf] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.3), rgba(255, 71, 87, 0.1));
    color: #ff4757;
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
}

.metric-info[b-3hhg7c2mzf] {
    flex: 1;
    min-width: 0; /* 防止文本溢出 */
}

.metric-label[b-3hhg7c2mzf] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 5px;
}

.metric-value[b-3hhg7c2mzf] {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    font-family: 'Consolas', monospace;
    margin-bottom: 5px;
}

.metric-trend[b-3hhg7c2mzf] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.trend-up[b-3hhg7c2mzf] {
    color: #00d49a;
}

.trend-down[b-3hhg7c2mzf] {
    color: #ff4757;
}

/* 图表行 */
.charts-row[b-3hhg7c2mzf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.chart-panel[b-3hhg7c2mzf] {
    background: rgba(16, 26, 53, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(0, 193, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: fadeInUp-b-3hhg7c2mzf 0.6s ease-out;
    transition: all 0.3s ease;
}

.chart-panel:hover[b-3hhg7c2mzf] {
    box-shadow: 0 8px 32px rgba(0, 193, 255, 0.3),
                0 0 60px rgba(0, 193, 255, 0.1);
    transform: translateY(-2px);
    border-color: rgba(0, 193, 255, 0.4);
}

/* 面板进入动画 */
@keyframes fadeInUp-b-3hhg7c2mzf {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 为不同位置的图表添加延迟动画 */
.charts-row:nth-child(2) .chart-panel:nth-child(1)[b-3hhg7c2mzf] {
    animation-delay: 0.1s;
    animation-fill-mode: both; /* 保持初始状态 */
}

.charts-row:nth-child(2) .chart-panel:nth-child(2)[b-3hhg7c2mzf] {
    animation-delay: 0.2s;
    animation-fill-mode: both;
}

.charts-row:nth-child(3) .chart-panel:nth-child(1)[b-3hhg7c2mzf] {
    animation-delay: 0.3s;
    animation-fill-mode: both;
}

.charts-row:nth-child(3) .chart-panel:nth-child(2)[b-3hhg7c2mzf] {
    animation-delay: 0.4s;
    animation-fill-mode: both;
}

.panel-header[b-3hhg7c2mzf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: rgba(0, 193, 255, 0.1);
    border-bottom: 1px solid rgba(0, 193, 255, 0.2);
    color: #00c1ff;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.panel-header i[b-3hhg7c2mzf] {
    font-size: 24px;
    animation: iconPulse-b-3hhg7c2mzf 2s ease-in-out infinite;
}

/* 图标脉冲动画 */
@keyframes iconPulse-b-3hhg7c2mzf {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* 面板标题光泽动画 */
.panel-header[b-3hhg7c2mzf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 193, 255, 0.3),
        transparent
    );
    animation: shine-b-3hhg7c2mzf 3s infinite;
}

@keyframes shine-b-3hhg7c2mzf {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

.panel-body[b-3hhg7c2mzf] {
    padding: 20px;
}

.chart[b-3hhg7c2mzf] {
    width: 100%;
    height: 350px;
}

/* 指标卡片脉冲效果 - 针对超时工单 */
.metric-card.red:hover .metric-value[b-3hhg7c2mzf] {
    animation: valuePulse-b-3hhg7c2mzf 1s ease-in-out;
}

@keyframes valuePulse-b-3hhg7c2mzf {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05); /* 减小缩放比例 */
    }
}

/* 指标卡片动画 */
.metrics-row .metric-card:nth-child(1)[b-3hhg7c2mzf] {
    animation: fadeInUp-b-3hhg7c2mzf 0.5s ease-out;
}

.metrics-row .metric-card:nth-child(2)[b-3hhg7c2mzf] {
    animation: fadeInUp-b-3hhg7c2mzf 0.5s ease-out 0.1s;
    animation-fill-mode: both;
}

.metrics-row .metric-card:nth-child(3)[b-3hhg7c2mzf] {
    animation: fadeInUp-b-3hhg7c2mzf 0.5s ease-out 0.2s;
    animation-fill-mode: both;
}

.metrics-row .metric-card:nth-child(4)[b-3hhg7c2mzf] {
    animation: fadeInUp-b-3hhg7c2mzf 0.5s ease-out 0.3s;
    animation-fill-mode: both;
}

/* 超时工单卡片警告闪烁 */
.metric-card.red .metric-icon[b-3hhg7c2mzf] {
    animation: warningBlink-b-3hhg7c2mzf 2s ease-in-out infinite;
}

@keyframes warningBlink-b-3hhg7c2mzf {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 30px rgba(255, 71, 87, 0.6);
    }
}

/* 趋势指示器动画 */
.trend-up[b-3hhg7c2mzf] {
    animation: bounceUp-b-3hhg7c2mzf 1s ease-out;
}

.trend-down[b-3hhg7c2mzf] {
    animation: bounceDown-b-3hhg7c2mzf 1s ease-out;
}

@keyframes bounceUp-b-3hhg7c2mzf {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }
    60% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounceDown-b-3hhg7c2mzf {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    60% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 数据卡片渐变背景动画 */
.metric-card[b-3hhg7c2mzf]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(0, 193, 255, 0.1) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none; /* 防止阻挡鼠标事件 */
    z-index: 0;
}

.metric-card:hover[b-3hhg7c2mzf]::before {
    opacity: 1;
    animation: rotate-b-3hhg7c2mzf 10s linear infinite;
}

/* 确保内容在伪元素之上 */
.metric-card > *[b-3hhg7c2mzf] {
    position: relative;
    z-index: 1;
}

@keyframes rotate-b-3hhg7c2mzf {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 加载状态 */
.chart-loading[b-3hhg7c2mzf] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    color: #00c1ff;
    font-size: 16px;
}

.chart-loading[b-3hhg7c2mzf]::after {
    content: '';
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border: 4px solid rgba(0, 193, 255, 0.2);
    border-top-color: #00c1ff;
    border-radius: 50%;
    animation: spin-b-3hhg7c2mzf 1s linear infinite;
}

@keyframes spin-b-3hhg7c2mzf {
    to {
        transform: rotate(360deg);
    }
}

/* 响应式优化 */
@media (max-width: 1600px) {
    .chart[b-3hhg7c2mzf] {
        height: 300px;
    }
}

@media (max-width: 1400px) {
    .charts-row[b-3hhg7c2mzf] {
        grid-template-columns: 1fr;
    }
    
    .chart[b-3hhg7c2mzf] {
        height: 350px;
    }
}

/* /Components/Shared/MainLayout.razor.rz.scp.css */
.layout-drawer-body[b-1gf6e0nvhj] {
    padding: 1rem;
}

    .layout-drawer-body[b-1gf6e0nvhj]  .groupbox {
        margin-top: 1rem;
    }

    .layout-drawer-body[b-1gf6e0nvhj]  .btn-info {
        margin-bottom: 1rem;
    }

.layout-item[b-1gf6e0nvhj] {
    --bb-layout-sidebar-bg: #f8f9fa;
    --bb-layout-footer-bg: #e9ecef;
    cursor: pointer;
    border: 2px solid #e9ecef;
    padding: 4px;
    border-radius: 4px;
    height: 80px;
    width: 120px;
    transition: border .3s linear;
}

    .layout-item:hover[b-1gf6e0nvhj],
    .layout-item.active[b-1gf6e0nvhj] {
        border: 2px solid #28a745;
    }

    .layout-item .layout-left[b-1gf6e0nvhj] {
        width: 30%;
        border-right: 1px solid var(--bs-border-color);
    }

        .layout-item .layout-left .layout-left-header[b-1gf6e0nvhj] {
            height: 16px;
            background-color: var(--bb-header-bg);
        }

        .layout-item .layout-left .layout-left-body[b-1gf6e0nvhj],
        .layout-item .layout-body .layout-left[b-1gf6e0nvhj] {
            background-color: var(--bb-layout-sidebar-bg);
        }

    .layout-item .layout-right .layout-right-header[b-1gf6e0nvhj],
    .layout-item .layout-top[b-1gf6e0nvhj] {
        background-color: var(--bb-header-bg);
        height: 16px;
    }

    .layout-item .layout-right .layout-right-footer[b-1gf6e0nvhj],
    .layout-item .layout-right-footer[b-1gf6e0nvhj] {
        background-color: var(--bb-layout-footer-bg);
        height: 12px;
    }

    .layout-item .layout-top[b-1gf6e0nvhj],
    .layout-item .layout-body[b-1gf6e0nvhj],
    .layout-item .layout-right-footer[b-1gf6e0nvhj] {
        width: 100%;
    }

#blazor-error-ui[b-1gf6e0nvhj] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 10000;
    
    text-align:center;
    font-size:20px;
    line-height:50px;
}

    #blazor-error-ui .dismiss[b-1gf6e0nvhj] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Shared/MainLayout2.razor.rz.scp.css */
.layout-page[b-oko6r56wsv] {
    height:100vh;
    padding: 10px;
    background-color: #003153;
}

.page-header[b-oko6r56wsv] {
    flex: 0 0 auto;
    color: #fff;
    height: 50px;
    display: flex;
    align-items: center;
    color: #fff;
}

.page-logo[b-oko6r56wsv] {
    margin-left:15px;
    margin-right:15px;
    height: 40px;
    object-fit: contain
}

.page-title[b-oko6r56wsv] {
    font-family: simhei, sans-serif;
    font-size: 24px;
}

.main-group[b-oko6r56wsv] {
    overflow: hidden !important;
    padding-top: 40px;
    font-family: simhei, sans-serif;
}

    .main-group ul[b-oko6r56wsv] {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

.main-group-item[b-oko6r56wsv] {
    list-style: none;
    color: #fff;
    cursor: pointer;
    text-align: center;
    width: 68px;
    padding: 3px 0px;
    border-radius: var(--bs-border-radius);
    margin-bottom: 6px;
}

    .main-group-item:hover[b-oko6r56wsv] {
        background-color: #fff;
        color: #003153;
    }

    .main-group-item.active[b-oko6r56wsv] {
        background-color: #fff;
        color: #003153;
    }

    /*    .main-group-item:first-child {
        border-top-left-radius: var(--bs-border-radius);
    }

    .main-group-item:last-child {
        border-bottom-left-radius: var(--bs-border-radius);
    }*/

    /*.main-group .active {
    background-color: #fff;
    color: #002fa7;
}*/

    .main-group-item .icon[b-oko6r56wsv] {
        font-size: 24px
    }

    .main-group-item .text[b-oko6r56wsv] {
        font-size: 14px
    }

.sub-group[b-oko6r56wsv] {
    background-color: #fff;
    color: #003153;
    border-radius: var(--bs-border-radius);
    /*
    border-top-right-radius: 
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    */
    width: 150px;
    margin-left:6px;
}

.sub-group[b-oko6r56wsv]  .menu {
    --bb-menu-active-color: #003153;
    --bb-menu-bar-bg: #003153;
    --bb-menu-item-hover-bg: #003153;
    --bb-menu-item-hover-color: #fff;
}

    .sub-group[b-oko6r56wsv]  .menu ::deep .nav-link {
        color: #003153;
    }

[b-oko6r56wsv] .tabs-body {
    padding: 5px;
    display: flex;
}

[b-oko6r56wsv] .tabs-body-content {
    flex: 1 1 auto;
    width: 100%;
}

#blazor-error-ui[b-oko6r56wsv] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 10000;
    text-align: center;
    font-size: 20px;
    line-height: 50px;
}

    #blazor-error-ui .dismiss[b-oko6r56wsv] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Shared/MainLayout3.razor.rz.scp.css */
.layout-page[b-7e9t6ptxm8] {
    --layout-bg-color: #003153;
    --layout-menu-bg-color: #006BB2;
    height: 100vh;
    /*padding: 10px;*/
    background-color: var(--layout-bg-color);
}

.page-header[b-7e9t6ptxm8] {
    flex: 0 0 auto;
    color: #ffffff;
    height: 55px;
    display: flex;
    align-items: center;
    background-color: #4081F4;
    /*border-radius: var(--bs-border-radius);*/
}

.icon-circle[b-7e9t6ptxm8] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}

.header-logo[b-7e9t6ptxm8] {
    width: 210px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-logo[b-7e9t6ptxm8] {
    max-width:180px;
    max-height:60px
}

.header-menu[b-7e9t6ptxm8] {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 5px;
    padding: 0 10px;
}

.header-menu-item[b-7e9t6ptxm8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    color: #fff;
    cursor: pointer;
    border-radius: 0;
    transition: background-color 0.2s;
}

/*.header-menu-item:hover {
    background-color: #636C7C;
}

.header-menu-item.active {
    background-color: #636C7C;
}*/

.user-menu[b-7e9t6ptxm8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-right: 10px;
    color: #fff;
    cursor: pointer;
    border-radius: 0;
    position: relative;
}

.user-menu:hover[b-7e9t6ptxm8] {
    background-color: #636C7C;
}

.user-avatar[b-7e9t6ptxm8] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0270C1;
}

.user-name[b-7e9t6ptxm8] {
    color: #fff;
}

.user-dropdown[b-7e9t6ptxm8] {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #2A2E35;
    border-radius: 0;
    min-width: 140px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    margin-top: 5px;
    overflow: hidden;
}

.user-dropdown-item[b-7e9t6ptxm8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
}

.user-dropdown-item:hover[b-7e9t6ptxm8] {
    background-color: #636C7C;
}

.side-menu[b-7e9t6ptxm8] {
    width: 220px;
    background-color: #ffffff;
    border-radius: 0;
    overflow-y: auto;
    flex-shrink: 0;
    border-right: 18px solid #F6F8FE;
}

.side-menu-list[b-7e9t6ptxm8] {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.side-menu-item[b-7e9t6ptxm8] {
    margin: 0;
}

.side-menu-title[b-7e9t6ptxm8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: #1D2129;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 16px;
}

.side-menu-title i[b-7e9t6ptxm8] {
    color: #4E5969;
}

.side-menu-title:hover[b-7e9t6ptxm8] {
    background-color: #EBF2FE;
}

.side-menu-title.active[b-7e9t6ptxm8] {
    background-color: #EBF2FE;
    color: #4081F4;
}

.side-menu-title.active i[b-7e9t6ptxm8] {
    color: #4081F4;
}

.side-menu-title i:first-child[b-7e9t6ptxm8] {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.side-menu-title .menu-arrow[b-7e9t6ptxm8] {
    margin-left: auto;
    font-size: 14px;
}

.side-submenu-list[b-7e9t6ptxm8] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.side-submenu-item[b-7e9t6ptxm8] {
    margin: 0;
}

.side-submenu-title[b-7e9t6ptxm8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: #1D2129;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 16px;
}

.side-submenu-title i[b-7e9t6ptxm8] {
    color: #4E5969;
}

.side-submenu-title:hover[b-7e9t6ptxm8] {
    background-color: #EBF2FE;
}

.side-submenu-title.active[b-7e9t6ptxm8] {
    background-color: #EBF2FE;
    color: #4081F4;
}

.side-submenu-title.active i[b-7e9t6ptxm8] {
    color: #4081F4;
}

.side-submenu-title i:first-child[b-7e9t6ptxm8] {
    width: 16px;
    text-align: center;
    font-size: 16px;
}

.side-submenu-title .menu-arrow[b-7e9t6ptxm8] {
    margin-left: auto;
    font-size: 10px;
}

[b-7e9t6ptxm8] .tabs.layout-tabs {
    --bb-tabs-item-active-color: #345393;
    --bb-tabs-item-hover-color: #345393;
    --bb-tabs-item-bg-color: #fff;
    border: none;
    border-top: 18px solid #F6F8FE;
    font-size: 16px;
}

    [b-7e9t6ptxm8] .tabs.layout-tabs > .tabs-body {
        background-color: var(--layout-bg-color);
        padding: 1px 0 0 0;
    }

    [b-7e9t6ptxm8] .tabs.layout-tabs > .tabs-body > .tabs-body-content {
        padding: 6px;
        border-radius: 0;
    }

    [b-7e9t6ptxm8] .tabs.layout-tabs > .tabs-header .tabs-item-wrap {
        background-color: #fff !important;
        color: #345393 !important;
        border-bottom: 3px solid transparent;
        transition: border-color 0.2s;
        font-size: 16px;
    }

    [b-7e9t6ptxm8] .tabs.layout-tabs > .tabs-header .tabs-item-wrap:hover {
        color: #345393 !important;
    }

    [b-7e9t6ptxm8] .tabs.layout-tabs > .tabs-header .tabs-item-wrap.active {
        background-color: #fff !important;
        color: #345393 !important;
        border-bottom: 3px solid #E02020 !important;
    }

#blazor-error-ui[b-7e9t6ptxm8] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 10000;
    text-align: center;
    font-size: 20px;
    line-height: 50px;
}

    #blazor-error-ui .dismiss[b-7e9t6ptxm8] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }