/**
 * 角色化首页样式
 * 非侵入式，不影响现有样式
 */

/* 角色提示卡片 */
#role-hint-card {
    border-left: 4px solid #007bff;
    animation: fadeIn 0.3s ease-in;
}

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

/* 角色特定的关键指标高亮 */
#metrics-dashboard-body .card[style*="border-left-width: 6px"] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

#metrics-dashboard-body .card[style*="border-left-width: 6px"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* 老板视图：突出合规状态 */
.role-owner #compliance-badge,
.role-owner [onclick*="navigateToCompliance"] {
    animation: pulse 2s infinite;
}

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

/* 经理视图：突出设备状态 */
.role-manager #device-status-badge,
.role-manager [onclick*="device_realtime_monitor"] {
    border-left-width: 6px !important;
}

/* 操作员视图：突出告警 */
.role-operator #alerts-count,
.role-operator [onclick*="device_realtime_monitor"] {
    font-weight: bold;
}

/* 移动端角色提示优化 */
@media (max-width: 768px) {
    #role-hint-card {
        font-size: 0.9rem;
        padding: 0.75rem;
    }
    
    #role-hint-card i {
        font-size: 1rem;
    }
}