/* 左上方监测人员容器 */
.monitor-container {
    background: rgba(0, 82, 156, 0.3);
    border-radius: clamp(8px, 1.2vw, 12px);
    width: 100%;
    max-width: clamp(300px, 25vw, 480px);
    margin: clamp(60px, 10vh, 100px) clamp(5px, 1vw, 10px) clamp(10px, 2vh, 20px) clamp(5px, 1vw, 10px);
    box-sizing: border-box;
    position: relative;
    z-index: 1000;
}

/* 标题区域布局 */
.monitor-top {
    padding: clamp(10px, 2vh, 20px) clamp(10px, 2vw, 20px) clamp(5px, 1vh, 10px) clamp(10px, 2vw, 20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(255, 255, 255, 1);
    flex-wrap: wrap;
    gap: clamp(5px, 1vw, 10px);
}

/* 标题文字样式 */
.monitor-top h3 {
    color: #ffff;
    font-size: clamp(14px, 1.6vw, 16px);
    margin: 0;
    flex-shrink: 0;
}

/* 巡查记录链接样式 */
.link-button {
    color: #7c0808;
    text-decoration: none;
    font-size: clamp(12px, 1.4vw, 14px);
    transition: all 0.3s ease;
    padding: clamp(1px, 0.2vh, 2px) clamp(6px, 0.8vw, 8px);
    flex-shrink: 0;
    white-space: nowrap;
}

/* 链接悬停效果 */
.link-button:hover {
    color: rgba(255, 255, 255, 0.9);
    transform: scale(clamp(1.1, 1.3, 1.4));
}

/* 人员信息内容区域 */
.monitor-content {
    padding: clamp(10px, 2vh, 20px);
}

/* 人员行布局 */
.staff-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: clamp(10px, 2vh, 20px);
    gap: clamp(10px, 2vw, 15px);
    flex-wrap: wrap;
}

/* 人员信息卡片 */
.staff-card {
    display: flex;
    width: 100%;
    max-width: clamp(180px, 22vw, 220px);
    min-width: 150px;
    flex: 1;
}

/* 人员照片样式 */
.staff-photo {
    width: clamp(15%, 20%, 25%);
    min-width: clamp(40px, 6vw, 60px);
    max-width: clamp(60px, 8vw, 80px);
    height: auto;
    aspect-ratio: 4/5;
    border-radius: clamp(2px, 0.4vw, 4px);
    object-fit: cover;
    margin-right: clamp(8px, 1.2vw, 12px);
    flex-shrink: 0;
}

/* 人员信息文本区域 */
.staff-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
}

/* 人员角色文本 */
.staff-role {
    font-size: clamp(12px, 1.4vw, 14px);
    color: #fff;
    margin-bottom: clamp(2px, 0.4vh, 4px);
    word-wrap: break-word;
}

/* 人员姓名文本 */
.staff-name {
    font-size: clamp(14px, 1.6vw, 16px);
    font-weight: bold;
    margin-bottom: clamp(2px, 0.4vh, 4px);
    color: #fff;
    word-wrap: break-word;
}

/* 联系方式区域 */
.staff-contact {
    font-size: clamp(12px, 1.4vw, 14px);
    display: flex;
    align-items: center;
    margin-bottom: clamp(2px, 0.4vh, 4px);
    color: #fff;
    word-wrap: break-word;
}

/* 所在地区文本 */
.staff-location {
    font-size: clamp(12px, 1.4vw, 14px);
    color: #fff;
    word-wrap: break-word;
}

/* 电话图标样式 */
.phone {
    margin-left: clamp(3px, 0.5vw, 5px);
    width: clamp(14px, 1.8vw, 18px);
    height: clamp(14px, 1.8vw, 18px);
    vertical-align: middle;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

/* 基于视口的响应式调整 */
@media (max-width: 50vw) {
    .staff-row {
        flex-direction: column;
        gap: clamp(8px, 1.5vh, 15px);
    }
    
    .staff-card {
        max-width: 100%;
    }
    
    .monitor-top {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(5px, 1vh, 8px);
    }
}

@media (max-width: 30vw) {
    .monitor-container {
        max-width: 95vw;
    }
    
    .staff-photo {
        min-width: clamp(35px, 5vw, 45px);
        max-width: clamp(45px, 6vw, 55px);
    }
}

@media (max-height: 600px) {
    .monitor-container {
        margin-top: clamp(40px, 6vh, 60px);
        margin-bottom: clamp(5px, 1vh, 10px);
    }
}