/**
 * 用户列表样式文件
 * 适配PHP8.2+项目，兼容现代浏览器（Chrome/Firefox/Safari/Edge）
 * 功能：用户头像、基本信息展示样式
 */

/* 重置默认样式，避免浏览器差异 */
.profile-table {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    width: 100%;
    box-sizing: border-box;
}

/* 用户卡片容器 */
.profile-left {
    margin-bottom: 15px;
    box-sizing: border-box;
    /* 可选：添加卡片阴影，提升视觉效果 */
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.12); */
    /* 可选：圆角 */
    /* border-radius: 4px; */
    /* 可选：内边距 */
    /* padding: 10px; */
}

/* 头像单元格 */
.profile-avatar-cell {
    padding: 5px;
    vertical-align: top;
    box-sizing: border-box;
}

/* 头像图片样式（固定尺寸，避免变形） */
.profile-avatar-cell img {
    width: 100px;
    height: 133px;
    object-fit: cover; /* 图片比例适配，避免拉伸 */
    border: 1px solid #eee; /* 轻微边框，提升质感 */
    border-radius: 2px; /* 轻微圆角 */
}

/* 信息单元格 */
.profile-info-cell {
    padding: 5px;
    vertical-align: top;
    box-sizing: border-box;
}

/* 红色文字容器（主色调） */
.red-color {
    color: #d9534f; /* Bootstrap危险色，适配大多数网站风格 */
    line-height: 1.5; /* 行高优化，提升可读性 */
    box-sizing: border-box;
}

/* 标题样式（个性签名/头条） */
.give-color {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 14px; /* 固定字号，避免继承异常 */
}

/* 简介文本样式 */
.profile-text {
    margin-bottom: 5px;
    line-height: 1.4;
    font-size: 13px;
    color: #666; /* 浅灰色，区分主文本 */
}

/* 基础信息（姓名/年龄/地区） */
.profile-base-info {
    font-size: 13px;
}

/* 基础信息链接样式 */
.profile-base-info a {
    color: #0066cc; /* 标准链接色 */
    text-decoration: none;
    transition: color 0.2s; /* hover过渡，提升交互体验 */
}

/* 链接hover效果 */
.profile-base-info a:hover {
    text-decoration: underline;
    color: #004999; /* 深色hover，符合交互规范 */
}

/* 响应式适配（移动端优化） */
@media (max-width: 768px) {
    .profile-avatar-cell img {
        width: 80px;
        height: 106px; /* 等比例缩小 */
    }
    .profile-left {
        margin-bottom: 10px;
    }
    .profile-info-cell,
    .profile-avatar-cell {
        padding: 3px;
    }
}
/* 全局响应式适配 */
@media (max-width: 768px) {
    table {
        width: 100%;
        overflow-x: auto;
        display: block;
    }
    img {
        max-width: 100%;
        height: auto !important;
    }
    .profile-left {
        width: 100%;
        box-sizing: border-box;
        padding: 0 5px;
    }
}