/* ============================================
   工程项目管理系统 - 铂王光电科技
   全面美化升级版 v2.0
   ============================================ */

/* 全局样式 */
*{margin:0;padding:0;box-sizing:border-box}
:root{
    --primary:#1890ff;
    --primary-dark:#0066cc;
    --success:#52c41a;
    --warning:#fa8c16;
    --danger:#ff4d4f;
    --purple:#722ed1;
    --gold:#faad14;
    --bg-light:#f5f7fa;
    --text-dark:#1f1f1f;
    --text-gray:#666;
    --text-light:#999;
    --border:#e8e8e8;
    --shadow-sm:0 2px 8px rgba(0,0,0,0.06);
    --shadow-md:0 4px 16px rgba(0,0,0,0.1);
    --shadow-lg:0 8px 32px rgba(0,0,0,0.12);
    --radius-sm:6px;
    --radius-md:12px;
    --radius-lg:16px;
}
body{font-family:'PingFang SC','Microsoft YaHei',sans-serif;font-size:14px;color:var(--text-dark);background:var(--bg-light)}
a{text-decoration:none;color:inherit}

/* ============================================
   登录页面 - 动态背景+玻璃态效果
   ============================================ */
.login-page{
    min-height:100vh;
    background:linear-gradient(-45deg,#1a1a2e,#16213e,#0f3460,#e94560);
    background-size:400% 400%;
    animation:gradientBG 15s ease infinite;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    position:relative;
    overflow:hidden
}
@keyframes gradientBG{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
.login-page::before{
    content:'';
    position:absolute;
    width:200%;
    height:200%;
    background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 60%);
    top:-50%;
    left:-50%;
    animation:pulse 4s ease-in-out infinite
}
@keyframes pulse{
    0%,100%{transform:scale(1);opacity:0.5}
    50%{transform:scale(1.1);opacity:0.3}
}
.login-container{
    width:420px;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-radius:var(--radius-lg);
    padding:48px 40px;
    box-shadow:0 25px 50px rgba(0,0,0,0.25);
    border:1px solid rgba(255,255,255,0.3);
    position:relative;
    z-index:1
}
.login-logo{text-align:center;margin-bottom:40px}
.logo-img{
    width:140px;
    height:auto;
    margin-bottom:20px;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-md);
    object-fit:contain;
    transition:transform 0.3s
}
.logo-img:hover{transform:scale(1.05)}
.login-logo h1{
    font-size:28px;
    font-weight:700;
    background:linear-gradient(135deg,var(--primary),#0066cc);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:8px;
    letter-spacing:2px
}
.login-logo p{color:var(--text-gray);font-size:14px;letter-spacing:2px}
.login-form{margin-bottom:30px}
.form-group{margin-bottom:24px}
.form-group label{display:block;margin-bottom:8px;color:var(--text-gray);font-size:14px;font-weight:500}
.form-group input{
    width:100%;
    height:50px;
    padding:0 16px;
    border:2px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:15px;
    transition:all 0.3s;
    background:#f0f4fa
}
.form-group input:focus{
    outline:none;
    border-color:var(--primary);
    background:#fff;
    box-shadow:0 0 0 3px rgba(24,144,255,0.1)
}
.btn-login{
    width:100%;
    height:52px;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
    border:none;
    border-radius:var(--radius-sm);
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.3s;
    box-shadow:0 4px 14px rgba(24,144,255,0.4);
    letter-spacing:4px
}
.btn-login:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(24,144,255,0.5)
}
.btn-login:active{transform:translateY(0)}
.register-link{
    text-align:center;
    margin-bottom:24px;
    padding-bottom:20px;
    border-bottom:1px solid #eee
}
.register-link a{color:var(--primary);font-size:14px;font-weight:500}
.register-link a:hover{text-decoration:underline}
.login-copyright{
    text-align:center;
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid #eee
}
.login-copyright span{color:var(--text-light);font-size:12px}
.login-warning{
    text-align:center;
    margin-top:12px;
    padding:10px 16px;
    background:#fff3cd;
    border:1px solid #ffc107;
    border-radius:6px
}
.login-warning i{color:#856404;margin-right:6px}
.login-warning span{color:#856404;font-size:12px;font-weight:500}
.remember-group{margin-bottom:16px!important}
.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer}
.checkbox-label input[type="checkbox"]{width:16px;height:16px;cursor:pointer}
.checkbox-label span{color:var(--text-gray);font-size:13px}
.demo-accounts{text-align:center}
.demo-accounts>p{color:var(--text-light);font-size:13px;margin-bottom:16px}
.demo-list{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.demo-list button{
    padding:10px 18px;
    background:#f5f7fa;
    color:var(--text-gray);
    border:1px solid var(--border);
    border-radius:20px;
    font-size:13px;
    cursor:pointer;
    transition:all 0.3s
}
.demo-list button:hover{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(24,144,255,0.3)
}

/* ============================================
   主应用布局 - 玻璃态导航栏
   ============================================ */
.main-app{min-height:100vh;display:flex;flex-direction:column}
.top-header{
    height:64px;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:0 2px 20px rgba(0,0,0,0.06);
    border-bottom:1px solid rgba(0,0,0,0.05);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:100
}
.header-left{display:flex;align-items:center;gap:14px}
.header-logo{
    height:44px;
    width:auto;
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-sm)
}
.header-left h2{
    font-size:22px;
    font-weight:600;
    color:var(--text-dark);
    letter-spacing:1px
}
.header-right{display:flex;align-items:center;gap:16px}
.user-info{display:flex;align-items:center;gap:10px}
.user-avatar{
    width:36px;
    height:36px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--purple));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:600;
    box-shadow:0 2px 8px rgba(24,144,255,0.3)
}
.user-role{
    padding:5px 14px;
    background:linear-gradient(135deg,#e8f4ff,#d4e9ff);
    color:var(--primary);
    border-radius:20px;
    font-size:12px;
    font-weight:500
}
.user-role.finance{background:linear-gradient(135deg,#f6ffed,#d9f7be);color:var(--success)}
.user-role.sales{background:linear-gradient(135deg,#fff7e6,#ffe58f);color:var(--gold)}
.user-name{color:var(--text-dark);font-weight:500}
.android-dl-link{
    display:flex;align-items:center;gap:6px;
    padding:6px 14px;
    background:linear-gradient(135deg,#a4c639,#8bc34a);
    color:#fff;border-radius:20px;font-size:12px;font-weight:600;
    text-decoration:none;white-space:nowrap;transition:all .3s;
    box-shadow:0 2px 8px rgba(139,195,74,.3)
}
.android-dl-link:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(139,195,74,.4);color:#fff}
.android-dl-link i{font-size:14px}
.btn-logout{
    padding:8px 18px;
    background:#fff;
    color:var(--danger);
    border:2px solid var(--danger);
    border-radius:20px;
    cursor:pointer;
    font-size:13px;
    font-weight:500;
    transition:all 0.3s
}
.btn-logout:hover{background:var(--danger);color:#fff;transform:translateY(-2px)}
.btn-change-pwd{
    padding:8px 14px;
    background:#fff;
    color:var(--primary);
    border:2px solid var(--primary);
    border-radius:20px;
    cursor:pointer;
    font-size:14px;
    transition:all 0.3s
}
.btn-change-pwd:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}
.main-content{display:flex;margin-top:64px;min-height:calc(100vh - 64px)}
.sidebar{
    width:240px;
    background:linear-gradient(180deg,rgba(255,255,255,0.98) 0%,rgba(248,249,250,0.95) 100%);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    position:fixed;
    top:64px;
    left:0;
    bottom:0;
    box-shadow:4px 0 24px rgba(0,0,0,0.06);
    overflow-y:auto;
    overflow-x:hidden;
    border-right:1px solid rgba(0,0,0,0.06);
    z-index:100;
    transition:width 0.3s cubic-bezier(0.4,0,0.2,1)
}
.sidebar.collapsed{width:72px}
.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-group-title,
.sidebar.collapsed .sidebar-footer,
.sidebar.collapsed .sidebar-toggle .toggle-text{display:none}
.sidebar.collapsed .nav-item{padding:14px 24px;justify-content:center}
.sidebar.collapsed .nav-icon{width:28px}

/* 侧边栏头部 */
.sidebar-header{
    padding:10px 10px 8px;
    border-bottom:1px solid rgba(0,0,0,0.04)
}
.sidebar-toggle{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    padding:10px 12px;
    border-radius:var(--radius);
    background:linear-gradient(135deg,rgba(24,144,255,0.06),rgba(114,46,209,0.06));
    transition:all 0.3s
}
.sidebar-toggle:hover{background:linear-gradient(135deg,rgba(24,144,255,0.12),rgba(114,46,209,0.12))}
.toggle-icon{font-size:18px;color:var(--primary);width:18px;text-align:center}
.toggle-text{font-size:13px;color:var(--text-gray);font-weight:500}

/* 导航分组 */
.nav-expand-all {
    margin: 8px 10px;
    padding: 8px 12px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.2);
    transition: all 0.2s;
    user-select: none;
}
/* 导航子菜单 - 移除浅色底纹 */
.nav-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
    background: transparent;
}
/* 导航列表 - 移除分组间隔产生的底纹 */
.nav-list {
    list-style: none;
    padding: 4px 0;
    margin: 0;
    background: transparent;
}
/* 导航分组 - 移除间距 */
.nav-group {
    margin-bottom: 0;
    background: transparent;
}
/* 导航分组标题 - 恢复正常背景和边框效果 */
.nav-group-title {
    background: rgba(0,0,0,0.03);
    border: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.nav-expand-all:hover {
    background: rgba(24,144,255,0.15);
    border-color: #1890ff;
    color: #1890ff;
}
.nav-expand-all i {
    transition: transform 0.3s;
    font-size: 10px;
}
/* 首页看板快捷入口 */
.nav-item.home-shortcut {
    margin: 8px 10px;
    padding: 10px 12px;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1890ff, #722ed1);
    border: none;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}
.nav-item.home-shortcut:hover {
    background: linear-gradient(135deg, #40a9ff, #9254de);
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}
.nav-item.home-shortcut .nav-icon {
    font-size: 14px;
}
.nav-list{list-style:none;padding:8px 0}
.nav-group{margin-bottom:4px}
.nav-group-title{
    margin:6px 10px 2px;
    padding:6px 12px;
    font-size:10px;
    font-weight:700;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:1px;
    border-radius:8px;
    background:linear-gradient(135deg,rgba(24,144,255,0.4),rgba(114,46,209,0.3));
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 4px 15px rgba(24,144,255,0.15),
                inset 0 1px 0 rgba(255,255,255,0.1);
    position:relative;
    overflow:hidden
}
.nav-group-title::before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:linear-gradient(180deg,#1890ff,#7262d9);
    border-radius:3px 0 0 3px
}
.nav-group-title::after{
    content:'';
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3))
}
.sidebar.collapsed .nav-group-title{
    padding:8px 12px;
    font-size:10px;
    letter-spacing:1px;
    margin:6px 8px 4px
}

/* 导航项 */
.nav-item{
    padding:8px 14px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-gray);
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    margin:1px 10px;
    border-radius:var(--radius-sm);
    position:relative;
    overflow:hidden
}
.nav-item::before{
    content:'';
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:4px;
    height:0;
    background:linear-gradient(180deg,var(--primary),var(--purple));
    border-radius:0 4px 4px 0;
    transition:height 0.3s cubic-bezier(0.4,0,0.2,1)
}
.nav-item::after{
    content:'';
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%) scaleY(0);
    width:6px;
    height:6px;
    background:var(--primary);
    border-radius:50%;
    opacity:0;
    transition:all 0.3s
}
.nav-item:hover{
    background:linear-gradient(90deg,rgba(24,144,255,0.1),rgba(24,144,255,0.03));
    color:var(--primary)
}
.nav-item:hover::before{height:20px}
.nav-item:hover::after{transform:translateY(-50%) scaleY(1);opacity:1}
.nav-item.active{
    background:linear-gradient(90deg,rgba(24,144,255,0.15),rgba(24,144,255,0.05));
    color:var(--primary);
    font-weight:600;
    box-shadow:0 2px 8px rgba(24,144,255,0.1)
}
.nav-item.active::before{height:28px;width:4px}
.nav-item.active::after{transform:translateY(-50%) scaleY(1);opacity:1}
.nav-item.hidden{display:none}
.nav-group.hidden{display:none}

/* 文本颜色 */
.text-danger{color:#ff4d4f!important}
.text-success{color:#52c41a!important}
.text-primary{color:#1890ff!important}
.text-warning{color:#fa8c16!important}
.text-muted{color:#999!important}

/* 考勤异常标红 */
.attendance-abnormal{background-color:#fff1f0!important}
.status-tag.danger{background:#fff1f0!important;color:#ff4d4f!important;border-color:#ffccc7!important}

/* 考勤设置页面样式 */
.attendance-settings-container{padding:20px}
.settings-card{background:#fff;border-radius:12px;padding:20px;box-shadow:var(--shadow-sm)}
.settings-table{width:100%;border-collapse:collapse}
.settings-table th{background:#fafbfc;padding:14px 16px;text-align:left;font-weight:600;font-size:13px;color:var(--text-gray);border-bottom:2px solid var(--border)}
.settings-table td{padding:14px 16px;border-bottom:1px solid #f5f5f5;font-size:14px;vertical-align:middle}
.settings-table tr:hover td{background:#fafbfc}
.time-input{width:100px;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:14px}
.time-input:focus{outline:none;border-color:var(--primary)}
.number-input{width:70px;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:14px;text-align:center}
.number-input:focus{outline:none;border-color:var(--primary)}
.btn-sm{padding:6px 16px;font-size:13px}
.role-tag{padding:4px 10px;border-radius:10px;font-size:12px;display:inline-block;font-weight:500}
.role-tag.admin{background:#fff1f0;color:#ff4d4f}
.role-tag.finance{background:#e6f7ff;color:#1890ff}
.role-tag.sales{background:#f6ffed;color:#52c41a}
.role-tag.office{background:#fff7e6;color:#fa8c16}
.role-tag.engineer{background:#f9f0ff;color:#722ed1}
.settings-summary{margin-top:16px}
.summary-row{display:flex;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid #f0f0f0;font-size:14px}
.summary-row:last-child{border-bottom:none}

/* 导航图标 */
.nav-icon{
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-sm);
    background:linear-gradient(135deg,rgba(24,144,255,0.08),rgba(114,46,209,0.05));
    color:var(--text-gray);
    font-size:13px;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    flex-shrink:0
}
.nav-item:hover .nav-icon{
    background:linear-gradient(135deg,rgba(24,144,255,0.15),rgba(114,46,209,0.1));
    color:var(--primary);
    transform:scale(1.1)
}
.nav-item.active .nav-icon{
    background:linear-gradient(135deg,var(--primary),#0066cc);
    color:#fff;
    transform:scale(1.08);
    box-shadow:0 4px 12px rgba(24,144,255,0.3)
}

/* 导航文字 */
.nav-text{
    font-size:13px;
    font-weight:500;
    flex:1;
    white-space:nowrap;
    transition:opacity 0.3s
}

/* 导航徽章 */
.nav-badge{
    min-width:16px;
    height:16px;
    padding:0 5px;
    background:linear-gradient(135deg,var(--primary),#0066cc);
    color:#fff;
    font-size:10px;
    font-weight:600;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:scale(0);
    transition:all 0.3s cubic-bezier(0.175,0.885,0.32,1.275)
}
.nav-badge.show{opacity:1;transform:scale(1)}
.nav-badge.warning-badge{background:linear-gradient(135deg,var(--gold),#d48806)}
.nav-badge.project-badge{background:linear-gradient(135deg,var(--purple),#531dab)}
.nav-badge.new-badge{background:linear-gradient(135deg,#ff4d4f,#cf1322)}

/* 侧边栏底部 */
.sidebar-footer{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:8px 10px;
    border-top:1px solid rgba(0,0,0,0.04);
    background:rgba(255,255,255,0.8);
    min-height:32px
}
.sidebar-info{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px
}
.version{
    font-size:11px;
    color:var(--text-light);
    padding:4px 10px;
    background:rgba(0,0,0,0.03);
    border-radius:10px
}
.version-top{
    font-size:11px;
    color:var(--primary-color);
    padding:3px 8px;
    background:rgba(52,111,248,0.1);
    border-radius:10px;
    vertical-align:super;
    font-weight:normal;
}
.version-tag{
    font-size:11px;
    color:#333;
    margin-left:8px;
    font-weight:normal;
    vertical-align:baseline;
    line-height:1;
}
.content-area{
    flex:1;
    margin-left:240px;
    padding:24px;
    background:var(--bg-light);
    min-height:calc(100vh - 64px);
    overflow-y:auto;
    transition:margin-left 0.3s cubic-bezier(0.4,0,0.2,1)
}
.sidebar.collapsed ~ .content-area,
.sidebar.collapsed + .content-area{margin-left:72px}

/* 页面底部版权 */
.page-footer{
    text-align:center;
    padding:12px;
    background:rgba(255,255,255,0.8);
    backdrop-filter:blur(20px);
    border-top:1px solid rgba(0,0,0,0.05);
    color:var(--text-light);
    font-size:13px;
    margin-left:240px;
    transition:margin-left 0.3s cubic-bezier(0.4,0,0.2,1)
}
.sidebar.collapsed ~ .page-footer,
.sidebar.collapsed + .page-footer{margin-left:72px}
.page-footer p{margin:0}

/* ============================================
   页面通用组件
   ============================================ */
.page{display:none;animation:fadeIn 0.3s ease;height:auto}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.page.active{display:block}
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
    padding-bottom:16px;
    border-bottom:2px solid var(--border)
}
.page-header h3{
    font-size:22px;
    font-weight:700;
    color:var(--text-dark);
    position:relative;
    padding-left:16px
}
.page-header h3::before{
    content:'';
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:4px;
    height:20px;
    background:linear-gradient(180deg,var(--primary),var(--purple));
    border-radius:2px
}
.btn-primary{
    padding:10px 22px;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
    border:none;
    border-radius:20px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    transition:all 0.3s;
    box-shadow:0 4px 12px rgba(24,144,255,0.3)
}
.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(24,144,255,0.4)
}
.btn-default{
    padding:10px 22px;
    background:#f5f5f5;
    color:#666;
    border:1px solid #d9d9d9;
    border-radius:20px;
    cursor:pointer;
    font-size:14px;
    transition:all 0.3s
}
.btn-default:hover{
    background:#e8e8e8;
    color:#333
}
.btn-success{
    padding:10px 22px;
    background:linear-gradient(135deg,#52c41a,#389e0d);
    color:#fff;
    border:none;
    border-radius:20px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    transition:all 0.3s;
    box-shadow:0 4px 12px rgba(82,196,26,0.3)
}
.btn-success:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(82,196,26,0.4)
}
.btn-warning{
    padding:10px 22px;
    background:linear-gradient(135deg,#faad14,#d48806);
    color:#fff;
    border:none;
    border-radius:20px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    transition:all 0.3s;
    box-shadow:0 4px 12px rgba(250,173,20,0.3)
}
.btn-warning:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(250,173,20,0.4)
}

/* ============================================
   首页待处理消息提示栏
   ============================================ */
.home-notify-bar{
    background:#fff;
    border-radius:12px;
    padding:0;
    margin-bottom:24px;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
    border:1px solid #f0f0f0;
    overflow:hidden;
    animation:notifySlideIn .35s ease
}
@keyframes notifySlideIn{
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:translateY(0)}
}
.home-notify-header{
    display:flex;
    align-items:center;
    gap:8px;
    padding:14px 20px;
    background:linear-gradient(135deg,#fff7e6,#fff1d6);
    border-bottom:1px solid #ffe7ba;
    font-size:15px;
    font-weight:600;
    color:#d48806;
    cursor:default;
    user-select:none
}
.home-notify-header i:first-child{
    font-size:16px;
    animation:bellRing 2s ease-in-out infinite
}
@keyframes bellRing{
    0%,100%{transform:rotate(0)}
    10%{transform:rotate(12deg)}
    20%{transform:rotate(-10deg)}
    30%{transform:rotate(6deg)}
    40%{transform:rotate(-4deg)}
    50%{transform:rotate(0)}
}
.home-notify-total{
    background:linear-gradient(135deg,#fa8c16,#d48806);
    color:#fff;
    font-size:12px;
    font-weight:700;
    min-width:22px;
    height:22px;
    line-height:22px;
    text-align:center;
    border-radius:12px;
    padding:0 6px
}
.home-notify-close{
    margin-left:auto;
    color:#d48806;
    cursor:pointer;
    font-size:13px;
    padding:4px;
    border-radius:4px;
    transition:background .2s
}
.home-notify-close:hover{background:rgba(212,136,6,.12)}
.home-notify-list{
    max-height:320px;
    overflow-y:auto
}
.home-notify-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 20px;
    cursor:pointer;
    transition:background .18s;
    border-bottom:1px solid #fafafa
}
.home-notify-item:last-child{border-bottom:none}
.home-notify-item:hover{background:#f6f8fa}
.home-notify-icon{
    width:40px;height:40px;
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:17px;flex-shrink:0
}
.home-notify-content{
    flex:1;min-width:0
}
.home-notify-title{
    display:flex;align-items:center;gap:8px;
    font-size:14px;font-weight:600;color:#262626;
    margin-bottom:3px
}
.home-notify-count{
    color:#fff;font-size:11px;font-weight:700;
    min-width:20px;height:20px;line-height:20px;
    text-align:center;border-radius:10px;padding:0 6px
}
.home-notify-desc{
    font-size:12.5px;color:#8c8c8c;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.home-notify-arrow{
    color:#d9d9d9;font-size:13px;flex-shrink:0;
    transition:color .2s
}
.home-notify-item:hover .home-notify-arrow{color:#1890ff}

/* ============================================
   首页 Dashboard 两列布局
   ============================================ */
.dashboard-grid{
    display:grid;
    grid-template-columns:1fr 380px;
    gap:24px;
    align-items:start
}
.dashboard-section{
    height:100%;
    margin-bottom:0
}
/* 统计卡片区上方渐变装饰条 */
#pageHome .page-header{
    position:relative;
    padding-top:4px
}
#pageHome .page-header::after{
    content:'';
    position:absolute;
    bottom:-2px;
    left:0;
    right:0;
    height:3px;
    border-radius:2px;
    background:linear-gradient(90deg,#1890ff 0%,#52c41a 25%,#fa8c16 50%,#722ed1 75%,#eb2f96 100%)
}
/* 项目列表卡片色彩增强 */
.dashboard-section .project-item{
    border-left:4px solid transparent;
    transition:all .25s
}
.dashboard-section .project-item:hover{
    border-left-color:#1890ff;
    box-shadow:0 4px 16px rgba(24,144,255,.12)
}
/* 打卡区域渐变头 */
.attendance-home-stats .attendance-home-card{
    position:relative;
    overflow:hidden
}
.attendance-home-stats .attendance-home-card::after{
    content:'';
    position:absolute;
    top:-30px;
    right:-30px;
    width:120px;
    height:120px;
    background:rgba(255,255,255,.08);
    border-radius:50%
}
/* 右列汇总卡片增加色彩条 */
.dashboard-col-side .attendance-home-summary .summary-item{
    position:relative;
    overflow:hidden;
    border-left:3px solid transparent;
    transition:all .2s
}
.dashboard-col-side .attendance-home-summary .summary-item:nth-child(1){border-left-color:#52c41a}
.dashboard-col-side .attendance-home-summary .summary-item:nth-child(2){border-left-color:#fa8c16}
.dashboard-col-side .attendance-home-summary .summary-item:nth-child(3){border-left-color:#f5222d}
.dashboard-col-side .attendance-home-summary .summary-item:nth-child(4){border-left-color:#ff4d4f}
.dashboard-col-side .attendance-home-summary .summary-item:nth-child(5){border-left-color:#722ed1}
.dashboard-col-side .attendance-home-summary .summary-item:hover{
    transform:translateX(4px);
    box-shadow:0 2px 8px rgba(0,0,0,.06)
}
/* 右列汇总卡片改为2列 */
.dashboard-col-side .attendance-home-summary{
    grid-template-columns:repeat(2,1fr)
}
/* 右列打卡状态块调整为竖排 */
.dashboard-col-side .attendance-home-status{
    flex-direction:column;
    gap:10px
}
.dashboard-col-side .status-block{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 16px;
    border-radius:8px;
    background:rgba(255,255,255,.12)
}
/* 响应式：窄屏回落为单列 */
@media(max-width:1200px){
    .dashboard-grid{grid-template-columns:1fr}
}

/* ============================================
   近48小时动态摘要
   ============================================ */
.recent-activity-section{
    margin-bottom:24px;
    background:linear-gradient(135deg,#f8faff 0%,#f0f5ff 50%,#faf5ff 100%);
    border-radius:var(--radius-lg);
    padding:20px 24px;
    border:1px solid #e8edf5;
    position:relative;
    overflow:hidden
}
.recent-activity-section::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,#1890ff 0%,#52c41a 20%,#fa8c16 40%,#eb2f96 60%,#722ed1 80%,#13c2c2 100%)
}
.recent-activity-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e8edf5
}
.recent-activity-title{
    display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:#1a1a2e
}
.recent-activity-title i{
    color:#1890ff;font-size:18px;
    animation:ra-bolt 2s ease-in-out infinite
}
@keyframes ra-bolt{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.6;transform:scale(1.15)}
}
.recent-activity-count{
    font-size:12px;color:#8c8c8c;background:#f0f0f0;padding:2px 10px;
    border-radius:10px;font-weight:500
}
.recent-activity-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    gap:12px
}
.ra-card{
    display:flex;align-items:center;gap:12px;
    padding:14px 16px;
    background:#fff;border-radius:10px;
    border-left:4px solid #1890ff;
    cursor:pointer;
    transition:all .25s ease;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
    animation:ra-fadein .4s ease both
}
@keyframes ra-fadein{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}
.ra-card:hover{
    transform:translateX(4px);
    box-shadow:0 4px 16px rgba(24,144,255,.12);
    border-left-color:#1890ff
}
.ra-card-icon{
    width:40px;height:40px;min-width:40px;
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:16px
}
.ra-card-body{
    flex:1;min-width:0
}
.ra-card-title{
    font-size:13px;font-weight:600;color:#262626;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.ra-card-desc{
    font-size:12px;color:#8c8c8c;margin-top:3px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.ra-card-time{
    font-size:11px;color:#bfbfbf;white-space:nowrap;
    min-width:56px;text-align:right
}
@media(max-width:768px){
    .recent-activity-grid{grid-template-columns:1fr}
    .recent-activity-section{padding:16px}
}
/* 响应式：窄屏回落为单列 */

/* ============================================
   首页统计卡片 - 悬浮动效
   ============================================ */
.stat-cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:24px
}
.stat-card{
    padding:24px;
    border-radius:var(--radius-lg);
    color:#fff;
    cursor:pointer;
    transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
    position:relative;
    overflow:hidden
}
.stat-card::before{
    content:'';
    position:absolute;
    top:-50%;
    right:-50%;
    width:100%;
    height:100%;
    background:radial-gradient(circle,rgba(255,255,255,0.2) 0%,transparent 60%);
    transition:all 0.5s
}
.stat-card:hover::before{top:-30%;right:-30%}
.stat-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-lg)}
.stat-card.blue{background:linear-gradient(135deg,#1890ff,#0066cc);box-shadow:0 8px 20px rgba(24,144,255,0.3)}
.stat-card.green{background:linear-gradient(135deg,#52c41a,#389e0d);box-shadow:0 8px 20px rgba(82,196,26,0.3)}
.stat-card.orange{background:linear-gradient(135deg,#fa8c16,#d48806);box-shadow:0 8px 20px rgba(250,140,22,0.3)}
.stat-card.purple{background:linear-gradient(135deg,#722ed1,#531dab);box-shadow:0 8px 20px rgba(114,46,209,0.3)}
.stat-card .icon{
    width:52px;
    height:52px;
    background:rgba(255,255,255,0.25);
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    margin-bottom:16px;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    backdrop-filter:blur(10px)
}
.stat-label{font-size:14px;opacity:0.9;margin-bottom:12px;font-weight:500}
.stat-value{font-size:30px;font-weight:bold;margin-bottom:8px;text-shadow:0 2px 4px rgba(0,0,0,0.1)}
.stat-desc{font-size:13px;opacity:0.8}
.stat-trend{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 8px;
    background:rgba(255,255,255,0.2);
    border-radius:10px;
    font-size:12px;
    margin-left:8px
}

/* ============================================
   区块样式
   ============================================ */
.section{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:24px;
    margin-bottom:24px;
    box-shadow:var(--shadow-sm);
    border:1px solid rgba(0,0,0,0.03)
}
.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    padding-bottom:12px;
    border-bottom:1px solid var(--border)
}
.section-header h4{font-size:16px;font-weight:600;color:var(--text-dark)}
.section-header a{color:var(--primary);font-size:14px;font-weight:500}

/* ============================================
   项目列表 - 卡片式布局
   ============================================ */
.project-list{display:flex;flex-direction:column;gap:16px}
.project-item{
    background:#fff;
    border-radius:var(--radius-md);
    padding:20px;
    cursor:pointer;
    transition:all 0.3s;
    border:1px solid var(--border);
    position:relative;
    overflow:hidden
}
.project-item::before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:var(--primary);
    transform:scaleY(0);
    transition:transform 0.3s
}
.project-item:hover{
    box-shadow:var(--shadow-md);
    border-color:var(--primary);
    transform:translateX(4px)
}
.project-item:hover::before{transform:scaleY(1)}
.project-item-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px
}
.project-name{font-size:16px;font-weight:600;color:var(--text-dark)}
.status-tag{
    padding:4px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:500
}
.status-tag.pending{background:#fff7e6;color:var(--gold)}
.status-tag.active,.status-tag.ongoing{background:#e8f4ff;color:var(--primary)}
.status-tag.completed{background:#f6ffed;color:var(--success)}
.project-meta{
    display:flex;
    gap:20px;
    font-size:13px;
    color:var(--text-gray);
    margin-bottom:16px
}
.project-meta span{display:flex;align-items:center;gap:6px}
.project-finance{
    display:flex;
    gap:24px;
    font-size:14px;
    margin-bottom:14px;
    padding-top:14px;
    border-top:1px dashed var(--border)
}
.finance-item{display:flex;align-items:center;gap:8px}
.finance-item span{color:var(--text-light);font-size:13px}
.text-success{color:var(--success)}
.text-warning{color:var(--warning)}
.text-primary{color:var(--primary)}
.progress-bar{
    height:8px;
    background:#f0f0f0;
    border-radius:4px;
    overflow:hidden
}
.progress-fill{
    height:100%;
    background:linear-gradient(90deg,var(--primary),#69c0ff);
    border-radius:4px;
    transition:width 0.5s
}

/* ============================================
   搜索栏
   ============================================ */
.search-bar{
    display:flex;
    gap:16px;
    margin-bottom:20px;
    padding:16px;
    background:#fff;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm)
}
.search-bar input{
    flex:1;
    height:42px;
    padding:0 16px;
    border:2px solid var(--border);
    border-radius:21px;
    font-size:14px;
    transition:all 0.3s;
    background:#fafafa
}
.search-bar input:focus{
    outline:none;
    border-color:var(--primary);
    background:#fff;
    box-shadow:0 0 0 3px rgba(24,144,255,0.1)
}
.search-bar select{
    height:42px;
    padding:0 16px;
    border:2px solid var(--border);
    border-radius:21px;
    font-size:14px;
    background:#fafafa;
    cursor:pointer;
    min-width:120px
}

/* ============================================
   模块统计栏（供应商/客户/库存/付款）
   ============================================ */
.stats-bar{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:20px;
    padding:16px 20px;
    background:linear-gradient(135deg,var(--primary),var(--purple));
    border-radius:var(--radius-md);
    box-shadow:0 4px 16px rgba(24,144,255,0.2)
}
.stats-bar .stat-item{background:transparent!important;border:none!important;box-shadow:none!important;text-align:center;flex:1 1 0;min-width:80px;padding:6px 8px!important;display:flex!important;flex-direction:column!important;gap:0!important;border-radius:0!important;align-items:center!important}
.stats-bar .stat-label{font-size:12px;color:rgba(255,255,255,0.85);margin-bottom:2px;white-space:nowrap}
.stats-bar .stat-value{font-size:18px;font-weight:700;color:#fff;white-space:nowrap}
.stats-bar .stat-value.accent{color:#ffd700}
.stats-bar .stat-value.green{color:#90EE90}

/* ============================================
   数据表格 - 斑马纹+悬浮效果
   ============================================ */
.data-table{
    background:#fff;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    border:1px solid rgba(0,0,0,0.03);
    width:100%
}
.data-table table{width:100%;border-collapse:collapse}
.data-table th{
    background:linear-gradient(135deg,#fafbfc,#f5f7fa);
    padding:16px 18px;
    text-align:center;
    font-weight:600;
    font-size:13px;
    color:var(--text-gray);
    border-bottom:2px solid var(--border);
    text-transform:uppercase;
    letter-spacing:0.5px
}
.data-table td{
    padding:16px 18px;
    border-bottom:1px solid #f5f5f5;
    font-size:14px;
    transition:background 0.2s
}
.data-table tr:nth-child(even){background:#fafbfc}
.data-table tr:hover td{background:#e8f4ff}
.data-table tr:last-child td{border-bottom:none}
.btn-text{
    color:var(--primary);
    cursor:pointer;
    margin-right:16px;
    font-weight:500;
    padding:4px 12px;
    border-radius:4px;
    transition:all 0.2s
}
.btn-text:hover{background:rgba(24,144,255,0.1)}
.btn-text.danger{color:var(--danger)}
.btn-text.danger:hover{background:rgba(255,77,77,0.1)}

/* 通用删除按钮 - 精致小巧 */
.btn-del{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px 12px;
    font-size:12px;
    color:#ff4d4f;
    background:rgba(255,77,77,0.06);
    border:1px solid rgba(255,77,77,0.2);
    border-radius:4px;
    cursor:pointer;
    transition:all .2s;
    white-space:nowrap;
}
.btn-del:hover{
    background:#ff4d4f;
    color:#fff;
    border-color:#ff4d4f;
    transform:translateY(-1px);
    box-shadow:0 2px 8px rgba(255,77,77,0.3);
}
.btn-del i{font-size:11px}

/* 批量操作栏 */
.batch-bar{
    display:none;
    align-items:center;
    gap:12px;
    padding:8px 12px;
    margin-bottom:10px;
    background:rgba(255,77,77,0.04);
    border:1px dashed rgba(255,77,77,0.2);
    border-radius:6px;
    font-size:13px;
    color:#666;
}
.batch-bar.visible{display:flex}
.batch-bar .sel-count{color:#ff4d4f;font-weight:600}
.btn-batch-del{
    padding:5px 16px;
    font-size:12px;
    color:#fff;
    background:linear-gradient(135deg,#ff4d4f,#ff7875);
    border:none;
    border-radius:4px;
    cursor:pointer;
    transition:all .2s;
}
.btn-batch-del:hover{
    transform:translateY(-1px);
    box-shadow:0 2px 8px rgba(255,77,77,0.35);
}

/* ============================================
   模态框 - 动画+玻璃态
   ============================================ */
.modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(4px);
    z-index:1000;
    align-items:center;
    justify-content:center;
    animation:fadeInModal 0.3s ease
}
@keyframes fadeInModal{from{opacity:0}to{opacity:1}}
.modal.show,.modal.active{display:flex}
.modal-content{
    background:#fff;
    border-radius:var(--radius-lg);
    width:540px;
    max-height:85vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:0 25px 50px rgba(0,0,0,0.25);
    animation:slideUp 0.3s cubic-bezier(0.175,0.885,0.32,1.275)
}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-lg{width:820px}
.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 28px;
    background:linear-gradient(135deg,#fafbfc,#fff);
    border-bottom:1px solid var(--border)
}
.modal-header h4{font-size:18px;font-weight:600;color:var(--text-dark)}
.modal-close{
    font-size:28px;
    color:var(--text-light);
    cursor:pointer;
    transition:color 0.2s;
    line-height:1
}
.modal-close:hover{color:var(--danger)}
.modal-body{padding:28px;overflow-y:auto;flex:1;background:#fafafa}
.modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:14px;
    padding:20px 28px;
    background:#fff;
    border-top:1px solid var(--border)
}
.btn-cancel{
    padding:10px 26px;
    background:#fff;
    color:var(--text-gray);
    border:2px solid var(--border);
    border-radius:20px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    transition:all 0.3s
}
.btn-cancel:hover{border-color:var(--text-gray);background:#f5f5f5}
.btn-confirm{
    padding:10px 26px;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
    border:none;
    border-radius:20px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    box-shadow:0 4px 12px rgba(24,144,255,0.3);
    transition:all 0.3s
}
.btn-confirm:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(24,144,255,0.4)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.form-row.full{grid-template-columns:1fr}
.form-item{margin-bottom:0}
.form-item label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    color:var(--text-gray);
    font-weight:500
}
.form-item label.required::after{
    content:'*';
    color:var(--danger);
    margin-left:4px
}
.form-item input,.form-item select,.form-item textarea{
    width:100%;
    padding:12px 16px;
    border:2px solid var(--border);
    border-radius:var(--radius-sm);
    font-size:14px;
    transition:all 0.3s;
    background:#fff
}
.form-item input:focus,.form-item select:focus,.form-item textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(24,144,255,0.1)
}
.form-item textarea{resize:vertical;min-height:90px}
.form-item input:disabled,.form-item select:disabled{background:#f5f5f5;cursor:not-allowed}

/* ============================================
   信息卡片
   ============================================ */
.info-card{
    background:#fff;
    border-radius:var(--radius-md);
    padding:20px;
    margin-bottom:20px;
    border:1px solid var(--border)
}
.info-card-title{
    font-size:15px;
    font-weight:600;
    color:var(--text-dark);
    margin-bottom:14px;
    padding-bottom:10px;
    border-bottom:1px solid var(--border)
}
.info-row{
    display:flex;
    padding:8px 0;
    font-size:14px;
    border-bottom:1px dashed #f0f0f0
}
.info-row:last-child{border-bottom:none}
.info-row .label{width:100px;color:var(--text-gray);flex-shrink:0}
.info-row .value{flex:1;color:var(--text-dark);font-weight:500}

/* ============================================
   统计页面
   ============================================ */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.stats-card{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:24px;
    box-shadow:var(--shadow-sm)
}
.stats-card.full-width{grid-column:1/-1}
.stats-card h4{
    font-size:16px;
    font-weight:600;
    margin-bottom:20px;
    padding-bottom:12px;
    border-bottom:2px solid var(--border);
    position:relative
}
.stats-card h4::after{
    content:'';
    position:absolute;
    bottom:-2px;
    left:0;
    width:60px;
    height:2px;
    background:var(--primary)
}

/* 统计汇总行 */
.stats-summary-row{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:16px;
    padding:24px;
    background:linear-gradient(135deg,var(--primary),var(--purple));
    border-radius:var(--radius-md);
    margin-bottom:24px;
    box-shadow:0 8px 24px rgba(24,144,255,0.25)
}
.summary-item{text-align:center}
.summary-label{font-size:12px;color:rgba(255,255,255,0.85);margin-bottom:6px}
.summary-value{font-size:16px;font-weight:600;color:#fff}
.summary-value.primary{color:#ffd700}
.summary-value.success{color:#90EE90}
.summary-value.warning{color:#FFA500}
.summary-value.highlight{font-size:22px;color:#ffd700;text-shadow:0 0 10px rgba(255,215,0,0.5)}

/* 项目统计卡片列表 */
.stats-project-list{display:flex;flex-direction:column;gap:16px}
.project-stat-card{
    background:#fff;
    border-radius:var(--radius-md);
    padding:22px;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--border);
    transition:all 0.3s;
    position:relative;
    overflow:hidden
}
.project-stat-card:hover{
    box-shadow:var(--shadow-md);
    transform:translateY(-4px);
    border-color:var(--primary)
}
.project-stat-card::before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:var(--primary)
}
.project-stat-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
    padding-bottom:14px;
    border-bottom:1px dashed var(--border)
}
.project-stat-name{font-size:16px;font-weight:600;color:var(--text-dark)}
.project-stat-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:12px;
    margin-bottom:16px
}
.stat-cell{text-align:center;padding:12px 8px;background:#fafbfc;border-radius:var(--radius-sm)}
.stat-cell-label{font-size:11px;color:var(--text-light);margin-bottom:6px}
.stat-cell-value{font-size:14px;font-weight:600;color:var(--text-dark)}
.stat-cell-value.success{color:var(--success)}
.stat-cell-value.warning{color:var(--warning)}
.project-progress{margin-top:10px}
.project-progress-bar{height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden}
.project-progress-fill{height:100%;border-radius:3px;transition:width 0.5s ease}
.progress-badge{
    display:inline-block;
    padding:4px 12px;
    border-radius:12px;
    color:#fff;
    font-size:12px;
    font-weight:600
}
.empty-state{
    text-align:center;
    padding:60px 20px;
    color:var(--text-light);
    font-size:14px
}

/* 待审核用户高亮 */
.pending-users-section{
    background:linear-gradient(135deg,#fff7e6,#fff);
    border-radius:var(--radius-lg);
    padding:20px;
    margin-bottom:24px;
    border:2px dashed var(--gold)
}

/* ============================================
   滚动条美化
   ============================================ */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}
::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#999}

/* ============================================
   响应式设计
   ============================================ */
@media(max-width:1200px){
    .stat-cards{grid-template-columns:repeat(2,1fr)}
    .stats-summary-row{grid-template-columns:repeat(3,1fr)}
    .project-stat-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
    .sidebar{width:72px}
    .sidebar .nav-text{display:none}
    .sidebar .nav-item{justify-content:center;padding:14px}
    .content-area{margin-left:72px}
    .page-footer{margin-left:72px}
    .form-row{grid-template-columns:1fr}
}

/* ============================================
   考勤管理样式
   ============================================ */
.attendance-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.check-in-card {
    background: linear-gradient(135deg, #1890ff, #722ed1);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    color: #fff;
    box-shadow: 0 20px 40px rgba(24, 144, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.check-in-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
    border-radius: 50%;
}

.check-in-time {
    font-size: 64px;
    font-weight: bold;
    letter-spacing: 4px;
    text-shadow: 0 4px 8px rgba(0,0,0,0.2);
    margin-bottom: 8px;
}

.check-in-date {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 32px;
}

.check-in-status {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
}

.status-item {
    text-align: center;
}

.status-label {
    font-size: 14px;
    opacity: 0.8;
    display: block;
    margin-bottom: 8px;
}

.status-value {
    font-size: 32px;
    font-weight: bold;
}

.status-divider {
    width: 1px;
    height: 60px;
    background: rgba(255,255,255,0.3);
}

.check-in-btn {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.check-in-btn:hover:not(:disabled) {
    transform: scale(1.05);
    background: rgba(255,255,255,0.25);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.check-in-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.check-in-btn.working {
    background: linear-gradient(135deg, #52c41a, #389e0d);
    border-color: #52c41a;
}

.check-in-btn.completed {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.5);
    cursor: not-allowed;
}

.check-in-btn i {
    font-size: 48px;
}

.attendance-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.stat-item {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.stat-icon.blue {
    background: linear-gradient(135deg, #1890ff, #0066cc);
}

.stat-icon.orange {
    background: linear-gradient(135deg, #fa8c16, #d48806);
}

.stat-icon.purple {
    background: linear-gradient(135deg, #722ed1, #531dab);
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-num {
    font-size: 28px;
    font-weight: bold;
    color: var(--text-dark);
}

.stat-info .stat-label {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 0;
}

.attendance-record {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
}

.attendance-record h4 {
    font-size: 18px;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.pending-section {
    background: linear-gradient(135deg, #fff7e6, #fff);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    border: 2px dashed var(--gold);
}

.pending-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 考勤状态标签 */
.status-tag.normal {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

.status-tag.late {
    background: #fff2e8;
    color: #fa8c16;
    border: 1px solid #ffbb96;
}

.status-tag.overtime {
    background: #f9f0ff;
    color: #722ed1;
    border: 1px solid #d3adf7;
}

.status-tag.working {
    background: #e6f7ff;
    color: #1890ff;
    border: 1px solid #91d5ff;
}

.status-tag.pending {
    background: #fffbe6;
    color: #faad14;
    border: 1px solid #ffe58f;
}

.status-tag.approved {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

.status-tag.rejected {
    background: #fff2f0;
    color: #ff4d4f;
    border: 1px solid #ffccc7;
}

/* ============================================
   考勤统计页面样式（美化版）
   ============================================ */
.att-stats-page {
    max-width: 960px;
    margin: 0 auto;
}

/* 顶部栏 */
.att-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.03);
}
.att-stats-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    align-items: center;
}
.att-stats-month-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.att-nav-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fafbfc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 13px;
    transition: all .2s;
}
.att-nav-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(24,144,255,.25);
}
.att-month-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 8px;
    transition: background .2s;
    min-width: 130px;
    text-align: center;
}
.att-month-label:hover {
    background: #e6f7ff;
}

/* 用户Tab */
.att-user-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    padding: 4px 0;
}
.att-tab-btn {
    padding: 8px 18px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-gray);
    cursor: pointer;
    transition: all .25s;
    display: flex;
    align-items: center;
}
.att-tab-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(24,144,255,.12);
}
.att-tab-btn.active {
    background: linear-gradient(135deg, var(--primary), #2f9bff);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(24,144,255,.3);
    transform: translateY(-1px);
}

/* 汇总卡片 */
.att-summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
@media(max-width:768px) {
    .att-summary-cards { grid-template-columns: repeat(2, 1fr); }
}
.att-sum-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.03);
    transition: transform .2s, box-shadow .2s;
}
.att-sum-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.att-sum-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.att-sum-green .att-sum-icon { background: linear-gradient(135deg, #52c41a, #389e0d); color: #fff; }
.att-sum-orange .att-sum-icon { background: linear-gradient(135deg, #fa8c16, #d46b08); color: #fff; }
.att-sum-red .att-sum-icon { background: linear-gradient(135deg, #f5222d, #cf1322); color: #fff; }
.att-sum-purple .att-sum-icon { background: linear-gradient(135deg, #722ed1, #531dab); color: #fff; }
.att-sum-body {
    display: flex;
    flex-direction: column;
}
.att-sum-num {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
}
.att-sum-green .att-sum-num { color: #389e0d; }
.att-sum-orange .att-sum-num { color: #d46b08; }
.att-sum-red .att-sum-num { color: #cf1322; }
.att-sum-purple .att-sum-num { color: #531dab; }
.att-sum-label {
    font-size: 13px;
    color: var(--text-gray);
    margin-top: 4px;
}

/* 日历卡片 */
.att-cal-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
}
.att-cal-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f5f5f5;
}
.att-cal-hd {
    font-size: 13px;
    color: var(--text-gray);
    font-weight: 600;
    padding: 4px 0;
}
.att-cal-hd-we {
    color: #bfbfbf;
}
.att-cal-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.att-cal-cell {
    position: relative;
    text-align: center;
    padding: 10px 4px 8px;
    min-height: 64px;
    border-radius: 10px;
    transition: all .15s;
}
.att-cal-empty {
    min-height: auto;
    padding: 10px 4px;
}
.att-cal-we {
    background: #fafafa;
    border-radius: 8px;
}
.att-cal-we .att-cal-day-num {
    color: #bfbfbf;
}
.att-cal-today {
    background: #e6f4ff !important;
    outline: 2px solid var(--primary);
    outline-offset: -1px;
    border-radius: 10px;
}
.att-cal-today .att-cal-day-num {
    color: var(--primary) !important;
    font-weight: 700;
}
.att-cal-hasrec {
    cursor: pointer;
}
.att-cal-hasrec:hover {
    background: #f0f5ff;
    box-shadow: 0 3px 10px rgba(24,144,255,.15);
    transform: translateY(-2px);
    border-radius: 10px;
}
.att-cal-day-num {
    font-size: 15px;
    color: #bbb;
    line-height: 1;
    font-weight: 400;
    margin-bottom: 6px;
}
.att-cal-hasrec .att-cal-day-num {
    color: var(--text-dark);
    font-weight: 600;
}
.att-cal-late .att-cal-day-num { color: #fa8c16 !important; }
.att-cal-early .att-cal-day-num { color: #f5222d !important; }
.att-cal-normal .att-cal-day-num { color: #52c41a !important; }
.att-cal-ot .att-cal-day-num { color: #722ed1 !important; }

.att-cal-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1.2;
    white-space: nowrap;
}

/* 详情卡片 */
.att-detail-card {
    margin-top: 20px;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    animation: attSlideIn .25s ease;
}
@keyframes attSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.att-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}
.att-detail-date {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
}
.att-detail-weekday {
    font-size: 13px;
    color: var(--text-gray);
    margin-top: 2px;
}
.att-detail-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.att-detail-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.att-detail-close:hover {
    background: #ff4d4f;
    color: #fff;
}
.att-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media(max-width:600px) {
    .att-detail-grid { grid-template-columns: repeat(2, 1fr); }
}
.att-detail-item {
    padding: 14px;
    background: #fafbfc;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
}
.att-detail-item-label {
    font-size: 12px;
    color: var(--text-gray);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.att-detail-item-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
}
.att-detail-locations {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.att-detail-loc {
    font-size: 13px;
}
.att-detail-loc a {
    color: var(--primary);
    text-decoration: none;
    transition: color .2s;
}
.att-detail-loc a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* 考勤记录姓名列 */
.attendance-record table th:first-child::after {
    content: '姓名';
}
@media(max-width:600px){
    .stat-cards{grid-template-columns:1fr}
    .stats-grid{grid-template-columns:1fr}
    .stats-summary-row{grid-template-columns:repeat(2,1fr)}
    .project-stat-grid{grid-template-columns:repeat(2,1fr)}
    .login-container{width:100%;padding:32px 24px}
    .demo-list{flex-direction:column}
    .page-header{flex-direction:column;gap:16px;align-items:flex-start}
}

/* ==================== 人事管理样式 ==================== */

/* 员工统计卡片 */
.personnel-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card-small {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.stat-card-small .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
}

.stat-card-small.blue .stat-icon { background: linear-gradient(135deg, #1890ff, #096dd9); }
.stat-card-small.green .stat-icon { background: linear-gradient(135deg, #52c41a, #389e0d); }
.stat-card-small.orange .stat-icon { background: linear-gradient(135deg, #fa8c16, #d46b08); }
.stat-card-small.purple .stat-icon { background: linear-gradient(135deg, #722ed1, #531dab); }

.stat-card-small .stat-info {
    display: flex;
    flex-direction: column;
}

.stat-card-small .stat-num {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.stat-card-small .stat-label {
    font-size: 13px;
    color: #999;
}

/* 员工列表容器 */
.personnel-container {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.personnel-section {
    margin-bottom: 24px;
}

.section-title {
    font-size: 15px;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
}

.section-title i {
    margin-right: 8px;
    color: #1890ff;
}

.personnel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* 员工卡片 */
.personnel-card {
    background: #fafbfc;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    transition: all 0.3s;
}

.personnel-card:hover {
    border-color: #1890ff;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
}

.personnel-card.inactive {
    opacity: 0.7;
    background: #f5f5f5;
}

.personnel-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.personnel-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    overflow: hidden;
}

.personnel-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.personnel-basic {
    flex: 1;
}

.personnel-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.personnel-no {
    font-size: 12px;
    opacity: 0.8;
}

.personnel-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    margin-top: 6px;
    background: rgba(255,255,255,0.2);
}

.personnel-status.active {
    background: #52c41a;
}

.personnel-status.inactive {
    background: #999;
}

.personnel-card-body {
    padding: 16px;
}

.personnel-card-body .info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
}

.personnel-card-body .info-row .label {
    color: #999;
    width: 24px;
}

.personnel-card-body .info-row .value {
    color: #333;
}

/* 证件徽章 */
.personnel-card-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 16px;
}

.file-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    background: #f0f0f0;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
}

.file-badge.complete {
    background: #e6f7ff;
    color: #1890ff;
}

.personnel-card-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

.personnel-card-actions .btn-sm {
    flex: 1;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s;
}

.personnel-card-actions .btn-sm i {
    font-size: 11px;
}

.personnel-card-actions .btn-primary {
    background: #e6f7ff;
    color: #1890ff;
}

.personnel-card-actions .btn-primary:hover {
    background: #1890ff;
    color: #fff;
}

.personnel-card-actions .btn-edit {
    background: #f6ffed;
    color: #52c41a;
}

.personnel-card-actions .btn-edit:hover {
    background: #52c41a;
    color: #fff;
}

.personnel-card-actions .btn-danger {
    background: #fff2f0;
    color: #ff4d4f;
}

.personnel-card-actions .btn-danger:hover {
    background: #ff4d4f;
    color: #fff;
}

/* ==================== 工资条样式 ==================== */

.payroll-container {
    padding: 20px;
}

.payroll-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.payroll-cards {
    display: contents;
}

.payroll-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.payroll-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.payroll-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.payroll-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1890ff, #722ed1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.user-avatar-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1890ff, #722ed1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 22px;
}

.payroll-user .user-info {
    display: flex;
    flex-direction: column;
}

.payroll-user .user-name {
    font-weight: 600;
    font-size: 15px;
    color: #333;
}

.payroll-user .payroll-month {
    font-size: 13px;
    color: #999;
}

.payroll-total {
    text-align: right;
}

.payroll-total .total-label {
    display: block;
    font-size: 12px;
    color: #999;
}

.payroll-total .total-amount {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: #52c41a;
}

.payroll-card-body {
    padding: 0;
}

.payroll-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.payroll-summary-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #f0f0f0;
}

.payroll-summary-table .label {
    color: #666;
    width: 25%;
}

.payroll-summary-table .value {
    text-align: right;
    color: #333;
    font-weight: 500;
}

.payroll-summary-table .section-title {
    background: #fafafa;
    font-weight: 600;
    color: #333;
    text-align: center;
}

.payroll-summary-table .section-title i {
    margin-right: 4px;
}

.payroll-summary-table .subtotal-row {
    background: #f5f5f5;
    font-weight: 600;
}

.payroll-summary-table .subtotal-row .label,
.payroll-summary-table .subtotal-row .value {
    border-top: 2px solid #ddd;
}

/* 考勤信息显示框 */
.attendance-info-row {
    margin-bottom: 16px;
}

.attendance-info-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
}

.attendance-info-box i {
    font-size: 20px;
    margin-right: 4px;
}

.attendance-info-box strong {
    font-size: 18px;
    font-weight: 600;
}

.attendance-info-box .rest-days,
.attendance-info-box .total-days {
    opacity: 0.85;
    font-size: 13px;
}

.payroll-item {
    text-align: center;
}

.payroll-item .item-label {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.payroll-item .item-value {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.payroll-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.payroll-card-actions .btn-sm {
    flex: 1;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.payroll-card-actions .btn-edit {
    background: #e6f7ff;
    color: #1890ff;
}

.payroll-card-actions .btn-edit:hover {
    background: #1890ff;
    color: #fff;
}

.payroll-card-actions .btn-danger {
    background: #fff1f0;
    color: #ff4d4f;
}

.payroll-card-actions .btn-danger:hover {
    background: #ff4d4f;
    color: #fff;
}

/* 工资条详情弹窗样式 */
.payroll-detail {
    max-height: 70vh;
    overflow-y: auto;
}

.detail-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
}

.detail-user {
    display: flex;
    align-items: center;
    gap: 16px;
}

.detail-user h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.detail-user p {
    margin: 4px 0 0;
    font-size: 14px;
    color: #999;
}

.detail-total {
    text-align: right;
}

.detail-total .label {
    display: block;
    font-size: 13px;
    color: #999;
}

.detail-total .amount {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #52c41a;
}

.payroll-sections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.payroll-section {
    background: #fafafa;
    border-radius: 8px;
    padding: 16px;
}

.payroll-section h4 {
    margin: 0 0 12px;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.payroll-section h4 i {
    color: #1890ff;
}

.payroll-table {
    width: 100%;
    border-collapse: collapse;
}

.payroll-table td {
    padding: 8px 4px;
    font-size: 13px;
    color: #666;
    border-bottom: 1px solid #eee;
}

.payroll-table td:last-child {
    text-align: right;
    font-weight: 500;
}

.payroll-table .total-row {
    background: #e6f7ff;
    font-weight: bold;
}

.payroll-table .total-row td {
    border-bottom: none;
    color: #1890ff;
}

.payroll-summary {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #1890ff, #722ed1);
    border-radius: 8px;
    padding: 20px;
    color: #fff;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.summary-row.final {
    font-size: 18px;
    font-weight: bold;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.3);
}

.payroll-remark {
    grid-column: 1 / -1;
    background: #fffbe6;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: #ad6800;
}

/* 工资确认状态样式 */
.payroll-card-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.payroll-card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.payroll-confirm-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.payroll-confirm-action .btn-confirm {
    background: linear-gradient(135deg, #52c41a, #73d13d);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
}

.payroll-confirm-action .btn-confirm:hover {
    background: linear-gradient(135deg, #73d13d, #95de64);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(82, 196, 26, 0.4);
}

.payroll-confirm-action .confirm-tip {
    font-size: 12px;
    color: #999;
    margin: 0;
}

.payroll-status-bar {
    margin-bottom: 12px;
}

.status-confirmed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f6ffed;
    color: #52c41a;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-pending {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff7e6;
    color: #fa8c16;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* 工资详情确认样式 */
.detail-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}

.detail-status.confirmed {
    background: #f6ffed;
    color: #52c41a;
}

.detail-status.pending {
    background: #fff7e6;
    color: #fa8c16;
}

.detail-confirm-action {
    text-align: center;
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
    margin-bottom: 16px;
}

.detail-confirm-action .btn-confirm-large {
    background: linear-gradient(135deg, #52c41a, #73d13d);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.detail-confirm-action .btn-confirm-large:hover {
    background: linear-gradient(135deg, #73d13d, #95de64);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(82, 196, 26, 0.4);
}

.detail-confirm-action .confirm-tip {
    font-size: 12px;
    color: #999;
    margin: 8px 0 0;
}

/* 工资条模态框样式 */
.form-section {
    background: #fafafa;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.form-section-title {
    margin: 0 0 12px;
    font-size: 14px;
    color: #333;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8e8e8;
}

.form-item.full {
    grid-column: 1 / -1;
}

.readonly {
    background: #f5f5f5;
    color: #999;
}

/* 考勤扣款提示 */
.form-tip {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    padding: 4px 8px;
    background: #f9f9f9;
    border-radius: 4px;
}

/* 考勤扣款详情提示 */
.attendance-deduction-tip {
    font-size: 11px;
    color: #666;
    margin-top: 6px;
    padding: 4px 8px;
    background: #fff3f3;
    border-radius: 4px;
    border-left: 3px solid #ff4d4f;
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.empty-tip {
    text-align: center;
    color: #ccc;
    padding: 20px;
    font-size: 13px;
}

/* 表单分节 */
.form-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #e8e8e8;
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.form-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-left: 12px;
    border-left: 3px solid #1890ff;
}

/* 文件上传 */
.file-upload {
    border: 2px dashed #d9d9d9;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #fafafa;
}

.file-upload:hover {
    border-color: #1890ff;
    background: #e6f7ff;
}

.file-upload input[type="file"] {
    width: 100%;
}

.file-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #333;
}

.file-preview button {
    padding: 4px 12px;
    background: #ff4d4f;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

/* 员工详情模态框 */
.modal-xl {
    max-width: 900px;
}

.personnel-detail {
    max-height: 70vh;
    overflow-y: auto;
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 12px;
    margin-bottom: 24px;
}

.detail-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: bold;
    overflow: hidden;
}

.detail-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-basic h3 {
    font-size: 24px;
    margin-bottom: 8px;
}

.detail-basic p {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    background: rgba(255,255,255,0.2);
}

.status-badge.active {
    background: #52c41a;
}

.status-badge.inactive {
    background: #999;
}

.detail-content {
    padding: 0 8px;
}

.detail-section {
    margin-bottom: 24px;
}

.detail-section h4 {
    font-size: 15px;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.detail-section h4 i {
    margin-right: 8px;
    color: #1890ff;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-item.full {
    grid-column: 1 / -1;
}

.detail-item .label {
    font-size: 12px;
    color: #999;
}

.detail-item .value {
    font-size: 14px;
    color: #333;
}

/* 证件文件网格 */
.files-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.file-item {
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
}

.file-label {
    padding: 8px 12px;
    background: #fafafa;
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.file-preview-box {
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 100px;
}

.file-preview-box.empty {
    color: #ccc;
}

.file-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s;
}

.file-thumbnail:hover {
    transform: scale(1.05);
}

.file-icon {
    width: 60px;
    height: 60px;
    background: #fff1f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ff4d4f;
}

.file-name {
    font-size: 11px;
    color: #666;
    text-align: center;
    word-break: break-all;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-actions {
    display: flex;
    gap: 8px;
}

.btn-xs {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    background: #e6f7ff;
    color: #1890ff;
}

.btn-xs:hover {
    background: #1890ff;
    color: #fff;
}

.remark-text {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    padding: 12px;
    background: #fafafa;
    border-radius: 8px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .personnel-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .personnel-grid {
        grid-template-columns: 1fr;
    }
    
    .detail-grid {
        grid-template-columns: 1fr;
    }
    
    .files-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .personnel-stats {
        grid-template-columns: 1fr;
    }
    
    .files-grid {
        grid-template-columns: 1fr;
    }
    
    .personnel-card-actions {
        flex-wrap: wrap;
    }
}

/* ==================== 首页打卡统计样式 ==================== */

.attendance-home-stats {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.attendance-home-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 24px;
    color: #fff;
    margin-bottom: 20px;
}

.attendance-home-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 16px;
}

.attendance-home-header i {
    font-size: 20px;
}

.attendance-home-date {
    margin-left: auto;
    font-size: 14px;
    opacity: 0.9;
}

.attendance-home-status {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.status-block {
    flex: 1;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.status-block .status-label {
    display: block;
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 8px;
}

.status-block .status-time {
    display: block;
    font-size: 22px;
    font-weight: 600;
}

.status-block.check-in .status-time {
    color: #52c41a;
}

.status-block.check-out .status-time {
    color: #fa8c16;
}

.status-block.work-hours .status-time {
    color: #fff;
}

.attendance-home-tips {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    opacity: 0.85;
    background: rgba(255,255,255,0.1);
    padding: 10px 14px;
    border-radius: 8px;
}

.attendance-home-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.attendance-home-summary .summary-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 10px;
}

.attendance-home-summary .summary-item i {
    font-size: 24px;
    color: #52c41a;
}

.attendance-home-summary .summary-item.warning i {
    color: #fa8c16;
}

.attendance-home-summary .summary-item.danger i {
    color: #ff4d4f;
}

.attendance-home-summary .summary-item.purple i {
    color: #722ed1;
}

.attendance-home-summary .summary-info {
    display: flex;
    flex-direction: column;
}

.attendance-home-summary .summary-num {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.attendance-home-summary .summary-label {
    font-size: 12px;
    color: #999;
}

.attendance-home-action {
    text-align: center;
}

.btn-attendance-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background: linear-gradient(135deg, #1890ff, #096dd9);
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.btn-attendance-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
}

/* 响应式 */
@media (max-width: 768px) {
    .attendance-home-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .attendance-home-status {
        flex-wrap: wrap;
    }
    
    .status-block {
        min-width: calc(50% - 8px);
    }
}

@media (max-width: 480px) {
    .attendance-home-summary {
        grid-template-columns: 1fr;
    }
}

/* ==================== 签证管理样式 ==================== */

.type-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    background: #e6f7ff;
    color: #1890ff;
}

.content-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amount-cell {
    font-weight: 600;
    color: #f5222d;
}

.modal-large {
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
}

.modal-large .modal-body {
    max-height: 75vh;
    overflow-y: auto;
}

/* 签证详情 */
.visa-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.visa-detail-grid .detail-item {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
}

.visa-detail-grid .detail-item label {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.visa-detail-grid .detail-item span {
    display: block;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.amount-highlight {
    color: #f5222d !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.detail-section {
    margin-bottom: 20px;
}

.detail-section label {
    display: block;
    font-size: 13px;
    color: #999;
    margin-bottom: 8px;
    font-weight: 500;
}

.detail-content {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    line-height: 1.8;
    color: #333;
}

.detail-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* 签证图片/附件展示 */
.visa-images-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.visa-image-item {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
    background: #f9f9f9;
    border: 1px solid #eee;
}

/* 图片类附件保持正方形 */
.visa-image-item.has-image {
    aspect-ratio: 1;
    cursor: pointer;
}

.visa-image-item.has-image:hover {
    transform: scale(1.05);
}

.visa-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 文件类附件样式 */
.visa-image-item.has-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    min-height: 100px;
    text-decoration: none;
    color: inherit;
}

.visa-image-item.has-file:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.visa-file-icon {
    font-size: 36px;
    margin-bottom: 8px;
    line-height: 1;
}

.visa-file-name {
    font-size: 11px;
    color: #555;
    word-break: break-all;
    text-align: center;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
}

/* 上传区域 */
.upload-area {
    border: 2px dashed #d9d9d9;
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #fafafa;
}

.upload-area:hover {
    border-color: #1890ff;
    background: #e6f7ff;
}

.upload-area i {
    font-size: 36px;
    color: #999;
    margin-bottom: 8px;
}

.upload-area p {
    margin: 0;
    color: #333;
    font-size: 14px;
}

.upload-area span {
    font-size: 12px;
    color: #999;
}

.upload-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.preview-item {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.preview-item i {
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #f5222d;
}

.preview-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px;
    padding: 2px 4px;
    text-align: center;
    white-space: nowrap;
}

/* ========== 管理制度页面内嵌样式 ========== */
#pagePolicy .policy-page-body {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px); /* 减去顶部导航64px + page-header约76px */
    min-height: 400px;
    position: relative;
    overflow: hidden;
}

#pagePolicy .policy-iframe-container {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    background: #f5f5f5;
    min-height: 0;
}

#pagePolicy .policy-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

#pagePolicy .policy-confirm-section {
    flex-shrink: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 20px;
    background: #fff;
    border-top: 1px solid #eee;
}

#pagePolicy .policy-confirm-section.show {
    max-height: 350px;
    padding: 16px 20px;
}

/* 内嵌模式下底部确认栏改为 absolute 定位（相对于 policy-page-body） */
#pagePolicy .policy-bottom-bar {
    position: absolute;
    left: 0 !important;
    right: 0;
    padding: 10px 24px;
    z-index: 10;
    max-height: 120px;
    overflow: hidden;
}

/* ========== 管理制度弹窗样式 ========== */
.modal-policy {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 100vh;
    border-radius: 0;
}

.modal-policy .modal-header {
    flex-shrink: 0;
}

.modal-policy .modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.policy-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.policy-iframe-container {
    flex: 1;
    background: #f5f5f5;
    border-bottom: 2px solid var(--primary);
    overflow-y: auto;
    overflow-x: hidden;
}

.policy-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
    display: block;
}

.policy-confirm-section {
    padding: 20px;
    background: #fff;
    border-top: 1px solid #eee;
}

.policy-read-notice {
    background: #fff7e6;
    border: 1px solid #ffd591;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.policy-read-notice p {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #333;
}

.policy-read-notice p:last-child {
    margin-bottom: 0;
}

.policy-read-notice i {
    color: #fa8c16;
    margin-right: 6px;
}

.policy-checkbox-item {
    margin-bottom: 16px;
}

.policy-checkbox {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.policy-checkbox input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #d9d9d9;
    border-radius: 3px;
    margin-right: 10px;
    flex-shrink: 0;
    position: relative;
    background: #fff;
}

.checkmark::after {
    content: '';
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.policy-checkbox input[type="checkbox"]:checked ~ .checkmark {
    background: var(--primary);
    border-color: var(--primary);
}

.policy-checkbox input[type="checkbox"]:checked ~ .checkmark::after {
    display: block;
}

.checkbox-text {
    line-height: 1.6;
}

.policy-timer {
    text-align: center;
    margin-bottom: 16px;
    font-size: 14px;
    color: #666;
}

.timer-number {
    display: inline-block;
    min-width: 24px;
    font-size: 20px;
    font-weight: bold;
    color: var(--primary);
}

.timer-progress {
    width: 200px;
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    margin: 10px auto 0;
    overflow: hidden;
}

.timer-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #69c0ff);
    border-radius: 3px;
    transition: width 1s linear;
}

.btn-policy-confirm {
    width: 100%;
    padding: 14px 24px;
    background: #e0e0e0;
    color: #999;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: not-allowed;
    transition: all 0.3s;
}

.btn-policy-confirm.ready {
    background: var(--primary);
    color: #fff;
    cursor: pointer;
}

.btn-policy-confirm.ready:hover {
    background: var(--primary-dark);
}

.btn-policy-confirm:disabled {
    opacity: 0.6;
}

/* ========== 底部确认栏样式 ========== */
.policy-bottom-bar {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 3px solid var(--primary);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    padding: 16px 24px;
    z-index: 1001;
    transition: bottom 0.5s ease;
}

.policy-bottom-bar.show {
    bottom: 0;
}

.policy-bottom-hint {
    text-align: center;
    color: #666;
    font-size: 14px;
    animation: bounce-hint 1.5s infinite;
}

@keyframes bounce-hint {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.policy-bottom-hint i {
    color: var(--primary);
    margin-right: 8px;
}

.policy-bottom-confirm {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.policy-checkbox-inline {
    flex: 1;
    min-width: 200px;
}

.policy-checkbox-inline .policy-checkbox {
    align-items: center;
}

.policy-timer-inline {
    font-size: 14px;
    color: #666;
    min-width: 80px;
}

.policy-timer-inline .timer-number {
    font-size: 18px;
}

.policy-bottom-confirm .btn-policy-confirm {
    width: auto;
    padding: 12px 32px;
    min-width: 120px;
}

/* 确认区域新布局 */
.policy-confirm-section {
    background: #fff;
    border-top: 1px solid #eee;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.policy-confirm-section.show {
    max-height: 400px;
    padding: 20px;
}

.policy-confirm-top {
    margin-bottom: 16px;
}

.policy-confirm-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* 管理制度确认徽章 */
.policy-confirmed-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f6ffed;
    border: 1px solid #b7eb8f;
    border-radius: 12px;
    font-size: 12px;
    color: #52c41a;
}

.policy-confirmed-badge i {
    font-size: 12px;
}

.policy-not-confirmed-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #fff2e8;
    border: 1px solid #ffbb96;
    border-radius: 12px;
    font-size: 12px;
    color: #fa8c16;
}

.policy-not-confirmed-badge i {
    font-size: 12px;
}

/* ========== 注册表单管理制度样式 ========== */
.reg-policy-section {
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.reg-policy-header {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reg-policy-header i {
    color: var(--primary);
}

.btn-reg-policy {
    width: 100%;
    padding: 12px 20px;
    background: #fff;
    border: 2px dashed var(--primary);
    border-radius: 8px;
    color: var(--primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-reg-policy:hover {
    background: var(--primary);
    color: #fff;
    border-style: solid;
}

.reg-policy-confirm {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e8e8e8;
}

.reg-policy-checkbox {
    margin-bottom: 12px;
}

.reg-policy-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    line-height: 1.6;
}

.reg-policy-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.reg-policy-timer {
    text-align: center;
    font-size: 13px;
    color: #666;
}

.reg-policy-timer .timer-number {
    font-size: 16px;
    font-weight: bold;
    color: var(--primary);
}

.reg-policy-status {
    margin-left: 8px;
}

.reg-policy-status.pending {
    color: #fa8c16;
}

.reg-policy-status.confirmed {
    color: #52c41a;
}

.text-success {
    color: #52c41a !important;
}
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 图片预览弹窗 */
.image-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
}

.image-preview-modal.show {
    opacity: 1;
}

.image-preview-modal img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
}

/* 响应式 */
@media (max-width: 768px) {
    .visa-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .visa-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .detail-actions {
        flex-wrap: wrap;
    }
    
    .detail-actions button {
        flex: 1;
        min-width: 100px;
    }
}

/* ==================== 角色管理样式 ==================== */

/* 角色列表容器 */
.role-container {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* 角色网格 */
.role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

/* 角色卡片 */
.role-card {
    background: #fafbfc;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    padding: 20px;
    transition: all 0.3s;
}

.role-card:hover {
    border-color: #1890ff;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
}

.role-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.role-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
}

.role-icon.system {
    background: linear-gradient(135deg, #faad14, #d48806);
}

.role-icon.custom {
    background: linear-gradient(135deg, #1890ff, #096dd9);
}

.role-title {
    flex: 1;
}

.role-title h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #333;
}

.role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.role-badge.system {
    background: #fff7e6;
    color: #fa8c16;
}

.role-badge.custom {
    background: #e6f7ff;
    color: #1890ff;
}

.role-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
    line-height: 1.5;
}

.role-permissions {
    font-size: 12px;
    color: #999;
    margin-bottom: 12px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 6px;
}

.role-permissions .permission-label {
    font-weight: 500;
    color: #666;
}

.role-meta {
    font-size: 12px;
    color: #999;
    margin-bottom: 12px;
}

.role-meta i {
    margin-right: 4px;
}

.role-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

/* 角色详情弹窗 */
.role-detail {
    max-height: 70vh;
    overflow-y: auto;
}

.role-detail .detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.role-detail .detail-header h3 {
    margin: 0;
    font-size: 20px;
    color: #333;
}

.role-detail .detail-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 8px;
}

.role-detail .detail-section h4 {
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

/* 权限标签 */
.perm-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    margin: 4px;
}

.perm-tag.granted {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

.perm-tag.denied {
    background: #f5f5f5;
    color: #999;
    border: 1px solid #d9d9d9;
}

.perm-category {
    margin-bottom: 16px;
}

.perm-category-name {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 8px;
}

.perm-tags {
    display: flex;
    flex-wrap: wrap;
}

/* 权限配置 */
.permission-config {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 16px;
    background: #fafafa;
    max-height: 400px;
    overflow-y: auto;
}

.perm-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e8e8;
}

.perm-group {
    margin-bottom: 16px;
}

.perm-group-title {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: #e6f7ff;
    border-radius: 6px;
}

.perm-group-title i {
    margin-right: 6px;
    color: #1890ff;
}

.perm-group-title input[type="checkbox"] {
    margin: 0;
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #1890ff;
}

.perm-group-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 8px 0 0 12px;
}

/* 两级分组样式：子模块 */
.perm-group-subgroups {
    padding-left: 8px;
}

.perm-subgroup {
    margin-bottom: 10px;
    padding: 6px 10px;
    background: #f8f9fc;
    border-radius: 6px;
    border-left: 3px solid #d9e2f3;
}

.perm-subgroup-title {
    font-size: 12px;
    font-weight: 600;
    color: #5a6a8a;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}

.perm-subgroup-title input[type="checkbox"] {
    margin: 0;
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #1890ff;
}

.perm-subgroup-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding-left: 20px;
}

.perm-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.perm-checkbox:hover {
    border-color: #1890ff;
    background: #e6f7ff;
}

.perm-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p {
    margin: 0;
    font-size: 14px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .role-grid {
        grid-template-columns: 1fr;
    }
    
    .perm-group-items {
        grid-template-columns: 1fr;
    }
    .perm-subgroup-items {
        grid-template-columns: 1fr;
    }
}

/* ==================== 进度管理样式 ==================== */

/* 阶段标签 */
.phase-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.phase-tag.preparation {
    background: #e6f7ff;
    color: #1890ff;
}

.phase-tag.foundation {
    background: #fff7e6;
    color: #fa8c16;
}

.phase-tag.installation {
    background: #fff1f0;
    color: #f5222d;
}

.phase-tag.debugging {
    background: #f9f0ff;
    color: #722ed1;
}

.phase-tag.acceptance {
    background: #f6ffed;
    color: #52c41a;
}

/* 进度条 */
.progress-bar-container {
    position: relative;
    height: 20px;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar-container.large {
    height: 28px;
    border-radius: 14px;
}

.progress-bar-container .progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #1890ff, #52c41a);
    border-radius: 10px;
    transition: width 0.3s ease;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: #333;
}

.progress-bar-container.large .progress-text {
    font-size: 13px;
}

/* 最新记录标记 */
.latest-row {
    background: #f6ffed;
}

.latest-row td:first-child::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #52c41a;
    border-radius: 50%;
    margin-right: 6px;
}

/* 滑块 */
.slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slider-container input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    background: #e8e8e8;
    border-radius: 3px;
    outline: none;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #1890ff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);
}

.slider-value {
    font-size: 16px;
    font-weight: 600;
    color: #1890ff;
    min-width: 50px;
    text-align: right;
}

/* 进度详情 */
.progress-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.progress-detail-grid .detail-item {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
}

.progress-detail-grid .detail-item label {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.progress-detail-grid .detail-item span {
    display: block;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.detail-item.full-width {
    grid-column: 1 / -1;
    background: transparent;
    padding: 0;
}

/* 施工图片展示 */
.progress-images-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.progress-image-item {
    aspect-ratio: 4/3;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
    border: 2px solid #f0f0f0;
}

.progress-image-item:hover {
    transform: scale(1.03);
    border-color: #1890ff;
}

.progress-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 图片删除按钮 */
.preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .progress-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .progress-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .progress-images-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== 子菜单样式 ==================== */

.nav-group-title.has-sub {
    cursor: pointer;
    display: flex;
    align-items: center;
    user-select: none;
    transition: background 0.2s;
    border-left: 3px solid transparent;
    color: #333;
}

.nav-group-title.has-sub:hover {
    background: rgba(255, 255, 255, 0.1);
}

.nav-group-title.has-sub.active {
    color: #1890ff;
    font-weight: bold;
}

.nav-group-title .nav-arrow {
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.3s;
}

.nav-group-title.open .nav-arrow {
    transform: rotate(180deg);
}

.nav-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    background: transparent;
    border-radius: 0;
}

.nav-sublist.open {
    display: block;
}

.nav-sublist .nav-item {
    padding-left: 44px;
    border-left: 3px solid transparent;
    border-bottom: none;
    transition: all 0.2s;
    color: #333;
    background: transparent;
}

.nav-sublist .nav-item:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #1890ff;
}

.nav-sublist .nav-item.active {
    border-left-color: #1890ff;
    background: rgba(24, 144, 255, 0.15);
    color: #1890ff;
}

.nav-sublist .nav-item.active::before {
    display: none;
}

/* 子菜单激活指示器 */
.nav-sublist .nav-item.active::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #1890ff;
    border-radius: 50%;
}

/* ==================== 工资管理页面样式 ==================== */

/* 工资管理容器 */
.wage-settings-container {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* 工资管理网格 */
.wage-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
}

/* 工资管理卡片 */
.wage-settings-card {
    background: #fafbfc;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    padding: 20px;
    transition: all 0.3s;
}

.wage-settings-card:hover {
    border-color: #1890ff;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
}

.wage-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.wage-settings-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
}

.type-badge {
    padding: 4px 12px;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}

.wage-settings-desc {
    color: #666;
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.6;
}

.wage-settings-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wage-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
}

.wage-label {
    color: #666;
    font-size: 13px;
}

.wage-value {
    color: #1890ff;
    font-weight: 600;
    font-size: 14px;
}

.wage-settings-note {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #eee;
    color: #999;
    font-size: 12px;
    text-align: center;
}

.wage-settings-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* 模态框表单样式 */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* 工资条页面样式扩展 */
.payroll-type-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.payroll-type-tag.office {
    background: #e6f7ff;
    color: #1890ff;
}

.payroll-type-tag.engineer {
    background: #f6ffed;
    color: #52c41a;
}

/* 工程部工资详情扩展 */
.engineer-wage-detail {
    background: #f6ffed;
    border: 1px solid #b7eb8f;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.engineer-wage-detail h4 {
    color: #52c41a;
    margin-bottom: 12px;
    font-size: 14px;
}

.engineer-wage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.engineer-wage-item {
    text-align: center;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
}

.engineer-wage-item .label {
    color: #666;
    font-size: 12px;
    margin-bottom: 4px;
}

.engineer-wage-item .value {
    color: #52c41a;
    font-size: 18px;
    font-weight: 600;
}

.engineer-wage-item .unit {
    color: #999;
    font-size: 12px;
}

/* 通用隐藏类 - 用于权限控制 */
.hidden {
    display: none !important;
}

/* ==================== 每月例查样式 ==================== */

/* 例查容器 */
.check-list-container {
    padding: 0;
    width: 100%;
}

/* 横向网格布局 */
.check-section {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    width: 100%;
}

.check-section-title {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1890ff, #69c0ff);
    color: #fff;
    font-size: 14px;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.check-section-title .btn-add-check-item {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border: 1px dashed rgba(255,255,255,0.6);
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}
.check-section-title .btn-add-check-item:hover {
    background: rgba(255,255,255,0.4);
}

.check-section-title i {
    margin-right: 8px;
}

/* 检查项卡片 - 横向网格 */
.check-items-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    justify-content: flex-start;
}

/* 检查项卡片 */
.check-item-card {
    flex: 0 0 20%;
    max-width: 20%;
    box-sizing: border-box;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.check-item-card:last-child {
    border-bottom: none;
    border-right: none;
}

.check-item-card:hover {
    background: #fafafa;
}

.check-item-card.checked {
    background: #f6ffed;
}

.check-item-card.unchecked {
    background: #fff2e8;
}

.check-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.check-item-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.check-item-info i {
    font-size: 18px;
}

.check-item-card.checked .check-item-info i {
    color: #52c41a;
}

.check-item-card.unchecked .check-item-info i {
    color: #ff4d4f;
}

.check-item-name {
    font-weight: 600;
    color: #1f1f1f;
}

.check-item-status {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 12px;
}

.check-item-status.checked {
    background: #d9f7be;
    color: #52c41a;
}

.check-item-status.unchecked {
    background: #fff1f0;
    color: #ff4d4f;
}

.check-item-status.partial {
    background: #fff7e6;
    color: #fa8c16;
}

.check-item-desc {
    color: #666;
    font-size: 13px;
    margin-bottom: 12px;
}

.check-item-detail {
    background: #fafafa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.check-item-meta {
    display: flex;
    gap: 16px;
    color: #666;
    font-size: 12px;
    margin-bottom: 8px;
}

.check-item-meta i {
    margin-right: 4px;
}

.check-item-remark {
    color: #333;
    font-size: 13px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e8e8e8;
}

.check-item-penalty {
    color: #ff4d4f;
    font-size: 13px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e8e8e8;
}

.check-item-penalty i {
    margin-right: 4px;
}

.check-images {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.check-image-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #e8e8e8;
    transition: transform 0.2s;
}

.check-image-thumb:hover {
    transform: scale(1.1);
}

.check-item-action {
    display: flex;
    gap: 8px;
}

.btn-check-action {
    background: #1890ff;
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-check-action:hover {
    background: #096dd9;
}

/* 例查表单样式 */
.check-form {
    padding: 16px 0;
}

.check-form-item {
    margin-bottom: 20px;
}

.check-form-item > label {
    display: block;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.check-form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.check-form-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.check-form-checkbox label {
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.form-input, .form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.form-input:focus, .form-textarea:focus {
    border-color: #1890ff;
    outline: none;
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* 图片上传区域 */
.image-upload-area {
    border: 2px dashed #d9d9d9;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    background: #fafafa;
    transition: border-color 0.2s;
}

.image-upload-area:hover {
    border-color: #1890ff;
}

.upload-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 8px;
}

.upload-placeholder {
    cursor: pointer;
    flex: 1;
    max-width: 200px;
    padding: 12px 8px;
    border-radius: 8px;
    transition: background 0.2s;
}

.upload-placeholder:hover {
    background: #f0f0f0;
}

.upload-placeholder.camera-btn:hover {
    background: #e6f7ff;
}

.upload-placeholder i {
    font-size: 32px;
    color: #1890ff;
    margin-bottom: 8px;
}

.upload-placeholder.camera-btn i {
    color: #52c41a;
}

.upload-placeholder p {
    color: #666;
    margin: 0;
    font-size: 14px;
}

.upload-hint {
    font-size: 12px !important;
    color: #999 !important;
    margin-top: 4px !important;
}

.existing-images {
    padding: 8px 0;
}

.existing-images label {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    display: block;
}

.image-preview-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.image-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
}

.image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e8e8e8;
}

.image-preview-item .remove-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: #ff4d4f;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}

.penalty-info {
    background: #fff7e6;
    border: 1px solid #ffd591;
    border-radius: 6px;
    padding: 12px !important;
    color: #fa8c16;
    font-size: 13px;
}

.penalty-info i {
    margin-right: 8px;
}

/* 例查详情样式 */
.check-detail {
    padding: 16px 0;
}

.check-detail .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8e8e8;
}

.check-detail .detail-header h4 {
    margin: 0;
    font-size: 18px;
    color: #1f1f1f;
}

.check-status-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
}

.check-status-badge.success {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

.check-status-badge.danger {
    background: #fff2f0;
    color: #ff4d4f;
    border: 1px solid #ffccc7;
}

.check-status-badge i {
    margin-right: 4px;
}

.check-detail .detail-info {
    margin-bottom: 20px;
}

.check-detail .detail-row {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.check-detail .detail-row .label {
    color: #666;
    width: 120px;
}

.check-detail .detail-row .value {
    color: #333;
    font-weight: 500;
}

.check-detail .detail-row .value.danger {
    color: #ff4d4f;
}

.check-detail .detail-row.highlight {
    background: #fff7e6;
    margin: 0 -16px;
    padding: 12px 16px;
}

.check-detail .detail-desc,
.check-detail .detail-remark {
    margin-bottom: 20px;
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
}

.check-detail .detail-desc h5,
.check-detail .detail-remark h5 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #333;
}

.check-detail .detail-desc p,
.check-detail .detail-remark p {
    margin: 0;
    color: #666;
    line-height: 1.6;
}

.check-detail .detail-images {
    margin-bottom: 20px;
}

.check-detail .detail-images h5 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #333;
}

.detail-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.detail-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e8e8e8;
    transition: transform 0.2s;
}

.detail-image:hover {
    transform: scale(1.02);
}

.check-detail .detail-penalty {
    background: #fff2e8;
    border: 1px solid #ffbb96;
    border-radius: 8px;
    padding: 16px;
    color: #d4380d;
    font-weight: 500;
    text-align: center;
}

.check-detail .detail-penalty i {
    margin-right: 8px;
}

/* 图片预览弹窗 */
.image-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.image-preview-modal img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.image-preview-modal .close-preview {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
}

.image-preview-modal .close-preview:hover {
    background: rgba(255,255,255,0.3);
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.empty-state i {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p {
    margin: 8px 0;
}

.empty-hint {
    font-size: 13px;
    color: #ccc;
}

/* ==================== 日志信息样式 ==================== */

/* 日志信息容器 */
.loginlog-container {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* 日志选项卡按钮 */
.log-tab-btn {
    padding: 6px 18px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #666;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.log-tab-btn:hover {
    color: #333;
    background: rgba(0,0,0,0.05);
}
.log-tab-btn.active {
    background: #fff;
    color: #1890ff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 操作日志操作类型标签 */
.op-type-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 6px;
}
.op-type-tag.create { background: #f6ffed; color: #52c41a; }
.op-type-tag.update { background: #e6f7ff; color: #1890ff; }
.op-type-tag.delete { background: #fff1f0; color: #ff4d4f; }

/* 操作类型徽章 */
.op-action-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 6px;
    vertical-align: middle;
}
.op-action-badge.op-create { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
.op-action-badge.op-update { background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; }
.op-action-badge.op-delete { background: #fff1f0; color: #ff4d4f; border: 1px solid #ffa39e; }
.op-action-badge.op-approve { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
.op-action-badge.op-reject { background: #fff7e6; color: #d46b08; border: 1px solid #ffd591; }
.op-action-badge.op-confirm { background: #e6f7ff; color: #096dd9; border: 1px solid #91d5ff; }
.op-action-badge.op-backup { background: #f9f0ff; color: #722ed1; border: 1px solid #d3adf7; }
.op-action-badge.op-restore { background: #fff7e6; color: #d4380d; border: 1px solid #ffa39e; }

/* 操作日志详情展开 */
.op-log-detail { margin-top: 4px; }
.op-detail-toggle {
    color: #999;
    font-size: 11px;
    cursor: pointer;
    user-select: none;
}
.op-detail-toggle:hover { color: #1890ff; }
.op-detail-content {
    display: none;
    margin-top: 4px;
    padding: 6px 10px;
    background: #fafafa;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    word-break: break-all;
}
.op-log-detail.expanded .op-detail-content { display: block; }
.op-log-detail.expanded .op-detail-toggle::before { content: '▲ '; }

/* 系统变更记录 - 时间线 */
.changelog-timeline {
    max-width: 800px;
    margin: 0 auto;
}
.changelog-day {
    margin-bottom: 24px;
}
.changelog-day-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 12px;
}
.changelog-day-date {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}
.changelog-day-week {
    font-size: 12px;
    color: #999;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 10px;
}
.changelog-day-count {
    font-size: 12px;
    color: #bbb;
    margin-left: auto;
}
.changelog-item {
    position: relative;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: #fff;
    border-radius: 6px;
    border-left: 4px solid #1890ff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}
.changelog-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.changelog-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.changelog-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.changelog-badge i {
    font-size: 11px;
}
.changelog-module {
    font-size: 12px;
    color: #666;
    background: #fafafa;
    padding: 2px 8px;
    border-radius: 4px;
}
.changelog-time {
    font-size: 12px;
    color: #bbb;
    margin-left: auto;
}
.changelog-desc {
    font-size: 13px;
    color: #444;
    line-height: 1.7;
    padding-left: 2px;
}
.changelog-files {
    font-size: 11px;
    color: #999;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #f0f0f0;
}
.changelog-files i {
    margin-right: 4px;
    color: #bbb;
}

/* 操作日志分页按钮 */
.op-page-btn {
    padding: 6px 14px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: all 0.2s;
}
.op-page-btn:hover { border-color: #1890ff; color: #1890ff; }
.op-page-btn.active { background: #1890ff; color: #fff; border-color: #1890ff; }
.op-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* 日志信息统计 */
.loginlog-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.loginlog-stats .stat-card-small {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.loginlog-stats .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
}

.loginlog-stats .stat-card-small.blue .stat-icon {
    background: linear-gradient(135deg, #1890ff, #096dd9);
}

.loginlog-stats .stat-card-small.green .stat-icon {
    background: linear-gradient(135deg, #52c41a, #389e0d);
}

.loginlog-stats .stat-card-small.orange .stat-icon {
    background: linear-gradient(135deg, #fa8c16, #d46b08);
}

.loginlog-stats .stat-card-small.purple .stat-icon {
    background: linear-gradient(135deg, #722ed1, #531d93);
}

.loginlog-stats .stat-info {
    flex: 1;
}

.loginlog-stats .stat-num {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.loginlog-stats .stat-label {
    display: block;
    font-size: 13px;
    color: #999;
    margin-top: 4px;
}

/* 角色徽章 */
.role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.role-badge.admin {
    background: #fff7e6;
    color: #fa8c16;
}

.role-badge.finance {
    background: #e6f7ff;
    color: #1890ff;
}

.role-badge.sales {
    background: #f6ffed;
    color: #52c41a;
}

.role-badge.office {
    background: #f9f0ff;
    color: #722ed1;
}

.role-badge.engineer {
    background: #fff2e8;
    color: #fa541c;
}

/* 日志信息详情 */
.login-log-detail {
    max-height: 70vh;
    overflow-y: auto;
}

.login-log-detail .detail-header-info {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
    color: #fff;
    border-radius: 12px;
    margin-bottom: 24px;
}

.login-log-detail .detail-avatar-large {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
}

.login-log-detail .detail-info h3 {
    margin: 0 0 8px 0;
    font-size: 22px;
}

.login-log-detail .detail-info p {
    margin: 4px 0;
    font-size: 14px;
    opacity: 0.9;
}

/* 响应式 */
@media (max-width: 768px) {
    .loginlog-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .loginlog-stats {
        grid-template-columns: 1fr;
    }
}

/* ==================== 例查设置页面样式 ==================== */

.check-settings-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.check-setting-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s;
}

.check-setting-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.check-setting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.check-setting-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.check-setting-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.check-setting-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.check-setting-type {
    font-size: 13px;
    margin-top: 2px;
}

.check-setting-items {
    margin-bottom: 16px;
    padding: 12px;
    background: #fafafa;
    border-radius: 8px;
}

.check-setting-tag {
    display: inline-block;
    padding: 4px 12px;
    background: #e6f7ff;
    color: #1890ff;
    border-radius: 4px;
    font-size: 12px;
    margin: 2px 4px 2px 0;
}

.check-setting-tag.custom {
    background: #f0f5ff;
    color: #2f54eb;
}

.check-setting-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-danger-text {
    color: #ff4d4f !important;
}

.btn-danger-text:hover {
    color: #cf1322 !important;
}

.status-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}

.status-tag.active {
    background: #d9f7be;
    color: #52c41a;
}

.status-tag.disabled {
    background: #f5f5f5;
    color: #999;
}

/* ==================== 例查统计页面样式 ==================== */

.checkstat-person-block {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border-left: 4px solid #1890ff;
}

.checkstat-person-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.checkstat-person-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #1890ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.checkstat-person-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.checkstat-person-info {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.checkstat-group {
    margin-bottom: 16px;
}

.checkstat-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: bold;
    color: #333;
    padding: 8px 12px;
    background: #fafafa;
    border-radius: 6px;
    margin-bottom: 8px;
}

.checkstat-group-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    background: #e6f7ff;
    color: #1890ff;
}

.checkstat-group-badge.complete {
    background: #d9f7be;
    color: #52c41a;
}

.checkstat-subgroup {
    margin-left: 8px;
    margin-bottom: 8px;
}

.checkstat-subgroup-title {
    font-size: 12px;
    color: #666;
    padding: 4px 0;
    border-left: 2px solid #d9d9d9;
    padding-left: 8px;
    margin-bottom: 6px;
}

.checkstat-subgroup .check-items-grid,
.checkstat-group > .check-items-grid {
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

/* 例查设置表格样式 */
.check-stats-bar {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    padding: 16px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.check-stat-item {
    text-align: center;
    flex: 1;
}

.check-stat-num {
    font-size: 28px;
    font-weight: 700;
    color: #1890ff;
}

.check-stat-label {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.check-settings-table-wrap {
    overflow-x: auto;
}

.btn-table-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    color: #1890ff;
    background: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-table-action:hover {
    color: #40a9ff;
    border-color: #40a9ff;
}

.btn-table-action.btn-danger {
    color: #ff4d4f;
    border-color: #ffa39e;
}

.btn-table-action.btn-danger:hover {
    color: #cf1322;
    border-color: #cf1322;
}

/* ==================== 项目成本样式 ==================== */

.cost-summary-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%);
    border: 1px solid #ffd591;
    border-radius: 8px;
    margin-bottom: 20px;
}

.cost-summary-total {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cost-summary-label {
    font-size: 13px;
    color: #8c6a00;
}

.cost-summary-amount {
    font-size: 28px;
    font-weight: 700;
    color: #d48806;
}

.cost-summary-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    color: #8c6a00;
    font-size: 13px;
}

.cost-type-group {
    margin-bottom: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
}

.cost-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8;
}

.cost-type-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cost-type-title i {
    color: #1890ff;
    font-size: 13px;
}

.cost-type-count {
    font-weight: 400;
    font-size: 12px;
    color: #999;
}

.cost-type-subtotal {
    font-size: 14px;
    color: #333;
}

.cost-type-subtotal b {
    color: #d48806;
    font-size: 16px;
}

.cost-detail-table {
    margin: 0;
}

.cost-detail-table thead th {
    background: #fafafa;
    font-size: 12px;
    color: #666;
    padding: 10px 12px;
}

.cost-detail-table tbody td {
    padding: 10px 12px;
    font-size: 13px;
}

.cost-grand-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f6ffed;
    border: 1px solid #b7eb8f;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #389e0d;
}

.cost-grand-total span:last-child {
    font-size: 24px;
    color: #237804;
}

/* ==================== 数据表格美化（项目成本/日志/办公成本通用） ==================== */

/* 汇总表加大行间距 */
.data-table th {
    padding: 14px 20px;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-align: center;
}

.data-table td {
    padding: 14px 20px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
}

/* 允许换行的列 */
.col-wrap {
    white-space: normal;
}

/* 金额列保持右对齐 */
.col-amount {
    text-align: right !important;
}

/* 操作列居中 */
.col-action,
.data-table td .btn-text,
.data-table td .btn-del {
    text-align: center;
}

/* 卡片内嵌表格 - 增加卡片上下间距和内边距 */
.stats-card > .overflow-x-auto,
.info-card .data-table,
.cost-type-group .data-table {
    margin: 0 -8px;
}

.stats-card {
    margin-bottom: 20px;
}

/* 月度卡片标题样式 */
.month-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e8e8e8;
}

.month-card-header h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.month-card-header h4 .month-label {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #1890ff, #722ed1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.month-card-header .month-count {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    background: #f5f5f5;
    padding: 2px 10px;
    border-radius: 10px;
}

/* tfoot 汇总行美化 */
.data-table tfoot td {
    padding: 12px 20px;
    background: linear-gradient(135deg, #f0f5ff, #e6f0ff) !important;
    font-weight: 600;
    border-top: 2px solid #d6e4ff;
}

.data-table tfoot td:hover {
    background: linear-gradient(135deg, #e6f0ff, #d6e4ff) !important;
}

/* 操作列统一宽度和对齐 */
.col-action {
    width: 100px;
    text-align: center;
    white-space: nowrap;
}

/* 金额列统一样式 */
.col-amount {
    text-align: right;
    font-weight: 600;
    color: #1890ff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 费用类型标签美化 */
.cost-type-tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
}

.cost-type-tag.tag-salary { background: #fff7e6; color: #d46b08; border: 1px solid #ffe58f; }
.cost-type-tag.tag-utility { background: #e6f7ff; color: #096dd9; border: 1px solid #91d5ff; }
.cost-type-tag.tag-transport { background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
.cost-type-tag.tag-insurance { background: #fff0f6; color: #c41d7f; border: 1px solid #ffadd2; }
.cost-type-tag.tag-logistics { background: #f9f0ff; color: #722ed1; border: 1px solid #d3adf7; }
.cost-type-tag.tag-tax { background: #fff1f0; color: #cf1322; border: 1px solid #ffa39e; }
.cost-type-tag.tag-travel { background: #e6fffb; color: #08979c; border: 1px solid #87e8de; }
.cost-type-tag.tag-entertain { background: #fff7e6; color: #d48806; border: 1px solid #ffd591; }
.cost-type-tag.tag-office { background: #f0f5ff; color: #2f54eb; border: 1px solid #adc6ff; }
.cost-type-tag.tag-default { background: #f5f5f5; color: #666; border: 1px solid #d9d9d9; }

/* 项目成本分组组间距加大 */
.cost-type-group {
    margin-bottom: 24px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}

.cost-type-group:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.cost-type-header {
    padding: 14px 20px;
}

.cost-type-title {
    font-size: 15px;
}

.cost-detail-table thead th {
    padding: 12px 20px;
    font-size: 13px;
}

.cost-detail-table tbody td {
    padding: 12px 20px;
    font-size: 14px;
}

/* 成本汇总条加大 */
.cost-summary-bar {
    padding: 20px 24px;
    margin-bottom: 24px;
}

.cost-summary-amount {
    font-size: 30px;
}

/* 成本总计加大 */
.cost-grand-total {
    padding: 18px 24px;
    margin-top: 8px;
    border-radius: 10px;
}

.cost-grand-total span:last-child {
    font-size: 26px;
}

/* 员工工时汇总表美化 */
.info-card .data-table th {
    padding: 10px 16px;
    font-size: 13px;
}

.info-card .data-table td {
    padding: 10px 16px;
    font-size: 14px;
}

/* 日志日期卡片间距 */
.info-card {
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}

.info-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* 办公成本年度总计卡片 */
.office-year-total {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 28px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.office-year-total .year-label {
    font-size: 14px;
    opacity: 0.85;
    margin-bottom: 6px;
}

.office-year-total .year-amount {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.office-year-total .year-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    opacity: 0.75;
}

/* 办公成本分类汇总 */
.type-summary-bar {
    display: flex;
    align-items: center;
    height: 8px;
    border-radius: 4px;
    background: #f0f0f0;
    overflow: hidden;
    margin-top: 4px;
}

.type-summary-bar .bar-seg {
    height: 100%;
    transition: width 0.3s;
}

/* ==================== 项目问题样式 ==================== */

/* 问题卡片 */
.issue-card {
    background: #fff;
    border-radius: 12px;
    padding: 0;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.issue-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.issue-card.issue-overdue {
    border-left: 4px solid #ff4d4f;
}

.issue-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #f5f5f5;
    background: linear-gradient(135deg, #fafbfc, #f5f7fa);
}

.issue-card-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.issue-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.issue-card-body {
    padding: 14px 20px;
}

.issue-info-row {
    display: flex;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.6;
    border-bottom: 1px dashed #f5f5f5;
}

.issue-info-row:last-child {
    border-bottom: none;
}

.issue-info-row .issue-label {
    flex-shrink: 0;
    width: 80px;
    color: #999;
    font-size: 13px;
}

/* 状态标签 */
.issue-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
}

.issue-status-badge.status-pending {
    background: #fff7e6;
    color: #d46b08;
    border: 1px solid #ffe58f;
}

.issue-status-badge.status-received {
    background: #e6f7ff;
    color: #096dd9;
    border: 1px solid #91d5ff;
}

.issue-status-badge.status-processing {
    background: #f0f5ff;
    color: #2f54eb;
    border: 1px solid #adc6ff;
}

.issue-status-badge.status-resolved {
    background: #f6ffed;
    color: #389e0d;
    border: 1px solid #b7eb8f;
}

.issue-status-badge.issue-badge-overdue {
    background: #fff2f0;
    color: #cf1322;
    border: 1px solid #ffa39e;
    animation: overduePulse 2s infinite;
}

@keyframes overduePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* 回复预览 */
.issue-reply-preview {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 20px;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
}

.reply-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1890ff, #722ed1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.reply-preview-content {
    flex: 1;
    min-width: 0;
}

.reply-preview-content .reply-name {
    font-weight: 600;
    font-size: 13px;
    margin-right: 6px;
}

.reply-preview-content .reply-status-text {
    font-size: 12px;
}

.reply-preview-content .reply-preview-text {
    margin: 4px 0 0;
    font-size: 13px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 问题详情卡片（回复弹窗中） */
.issue-detail-card {
    background: linear-gradient(135deg, #f0f5ff, #fafbfc);
    border-radius: 8px;
    padding: 14px 16px;
    border: 1px solid #d6e4ff;
}

/* 回复卡片 */
.reply-card {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.reply-card:last-child {
    border-bottom: none;
}

.reply-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reply-card-header .reply-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

/* ==================== 合同附件上传 ==================== */
.contract-upload-box {
    border: 2px dashed #d9d9d9;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: #fafafa;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contract-upload-box:hover,
.contract-upload-box.dragover {
    border-color: #1890ff;
    background: #e6f7ff;
}
.contract-upload-box .upload-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.upload-prog-bar {
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}
.upload-prog-fill {
    height: 100%;
    background: #1890ff;
    border-radius: 3px;
    transition: width 0.3s;
    width: 0%;
}
.contract-file-list {
    margin-top: 8px;
}
.contract-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #f5f5f5;
    margin-bottom: 4px;
    font-size: 13px;
}
.contract-file-item.pending {
    background: #fffbe6;
}
.cf-icon { font-size: 16px; flex-shrink: 0; }
.cf-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; }
.cf-size { color: #999; font-size: 12px; flex-shrink: 0; }
.cf-time { flex-shrink: 0; }
.cf-dl {
    color: #1890ff;
    font-size: 12px;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
}
.cf-dl:hover { text-decoration: underline; }

/* ==================== 项目附件总览 ==================== */
.pf-list { max-height: 500px; overflow-y: auto; }
.pf-project-row {
    display: flex; align-items: center; padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.2s;
}
.pf-project-row:hover { background: #e6f7ff; }
.pf-pname { flex: 1; font-size: 14px; color: #333; font-weight: 500; }
.pf-stat { color: #999; font-size: 12px; margin-right: 12px; }
.pf-arrow { color: #ccc; font-size: 12px; }
.pf-contract-block {
    margin-bottom: 12px; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden;
}
.pf-contract-title {
    padding: 10px 14px; background: #fafafa; font-size: 14px; font-weight: 500;
    border-bottom: 1px solid #e8e8e8; display: flex; align-items: center;
}
.pf-file-cnt {
    margin-left: auto; background: #f0f0f0; color: #666; font-size: 11px;
    padding: 2px 8px; border-radius: 10px; font-weight: normal;
}

/* ==================== 文件管理页面 ==================== */
.pfm-tag-other { background: #f5f5f5; color: #999; }

/* 文件管理 - 美化升级 */
/* ==================== 文件管理 - 科技感布局 ==================== */

/* 页面头部科技感背景 */
#pageProjectfiles .page-header {
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
}
#pageProjectfiles .page-header::before {
    display: none;
}
#pageProjectfiles .page-header::after {
    display: none;
}
#pageProjectfiles .page-header h3 {
    color: #262626;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
#pageProjectfiles .page-header h3::before {
    content: '';
    width: 4px;
    height: 20px;
    background: #1890ff;
    border-radius: 2px;
}
#pageProjectfiles .page-header > div {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
#pageProjectfiles .page-header select,
#pageProjectfiles .page-header .form-input {
    background: #fff;
    border: 1px solid #d9d9d9;
    color: #333;
    border-radius: 8px;
    font-size: 13px;
    padding: 9px 14px;
    transition: all 0.2s;
}
#pageProjectfiles .page-header select:focus,
#pageProjectfiles .page-header .form-input:focus {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24,144,255,0.1);
    outline: none;
}
#pageProjectfiles .page-header select option {
    background: #fff;
    color: #333;
}
#pageProjectfiles .page-header .btn-primary {
    background: #1890ff;
    border: none;
    color: #fff;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s;
}
#pageProjectfiles .page-header .btn-primary:hover {
    background: #40a9ff;
}
#pageProjectfiles .page-header .btn-default {
    background: #fff;
    border: 1px solid #d9d9d9;
    color: #666;
    border-radius: 8px;
    transition: all 0.2s;
}
#pageProjectfiles .page-header .btn-default:hover {
    border-color: #1890ff;
    color: #1890ff;
}

/* 统计摘要 */
#pfSummary {
    padding: 16px 20px;
    background: #fafbfc;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 13px;
    color: #666;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
#pfSummary::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #69b1ff, #95de64, #ffc53d, #b37feb);
}
.pfm-stat-item {
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-right: 1px solid rgba(0,0,0,0.06);
    position: relative;
}
.pfm-stat-item:first-child { padding-left: 4px; }
.pfm-stat-item:last-child { border-right: none; }
.pfm-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.pfm-stat-icon.blue { background: #e6f7ff; color: #1890ff; }
.pfm-stat-icon.purple { background: #f9f0ff; color: #722ed1; }
.pfm-stat-icon.amber { background: #fffbe6; color: #fa8c16; }
.pfm-stat-icon.green { background: #f6ffed; color: #52c41a; }
.pfm-stat-num {
    font-size: 18px;
    font-weight: 700;
    color: #262626;
    line-height: 1.2;
}
.pfm-stat-label { font-size: 12px; color: #999; margin-top: 1px; }

/* 项目分组卡片 */
.pfm-project-section {
    margin-bottom: 24px;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: all 0.25s ease;
    background: #fff;
    position: relative;
}
.pfm-project-section:hover {
    box-shadow: 0 4px 16px rgba(24,144,255,0.1);
}
.pfm-project-header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: #fafbfc;
    font-size: 15px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #f0f0f0;
}
.pfm-project-header::before {
    display: none;
}
.pfm-project-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 3px; height: 100%;
    background: #1890ff;
    border-radius: 0 2px 2px 0;
}
@keyframes pfm-gradient-flow {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
.pfm-project-header > * { position: relative; z-index: 1; }
.pfm-project-name {
    font-weight: 600;
    color: #262626;
    letter-spacing: 0.3px;
}
.pfm-project-name i { margin-right: 8px; opacity: 0.9; }
.pfm-file-count {
    margin-left: 12px;
    background: #e6f7ff;
    color: #1890ff;
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 500;
}

/* 模块标题栏 */
.pfm-module-block { margin-bottom: 0; }
.pfm-module-title {
    padding: 10px 20px;
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    font-weight: 500;
    border-bottom: 1px solid #f0f2f5;
    background: #fafbfc;
    position: relative;
}
.pfm-module-title::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
}
.pfm-module-title[data-module="contract"]::before { background: #1890ff; }
.pfm-module-title[data-module="progress"]::before { background: #13c2c2; }
.pfm-module-title[data-module="visa"]::before { background: #722ed1; }
.pfm-module-title i {
    margin-right: 8px;
    font-size: 14px;
}
.pfm-module-title[data-module="contract"] i { color: #1890ff; }
.pfm-module-title[data-module="progress"] i { color: #13c2c2; }
.pfm-module-title[data-module="visa"] i { color: #722ed1; }
.pfm-module-count {
    margin-left: 8px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 500;
    background: #f5f5f5;
    color: #999;
}

/* 文件列表 */
.pfm-file-grid {
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pfm-file-card {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    transition: background 0.2s;
    border-radius: 0;
    position: relative;
    cursor: pointer;
}
.pfm-file-card:hover {
    background: #f0f7ff;
}
.pfm-file-card:nth-child(odd) { background: #fafbfc; }
.pfm-file-card:nth-child(odd):hover { background: #f0f7ff; }
.pfm-file-card::after {
    display: none;
}
.pfm-file-card:active { transform: scale(0.995); }
.pfm-file-check { margin-right: 14px; flex-shrink: 0; cursor: pointer; }
.pfm-selected-info { white-space: nowrap; color: #999 !important; }

/* 文件图标 */
.pfm-file-icon {
    font-size: 20px;
    margin-right: 14px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    position: relative;
    transition: all 0.2s;
}
.pfm-file-icon.pdf { background: #fff1f0; color: #f5222d; }
.pfm-file-icon.doc { background: #e6f7ff; color: #1890ff; }
.pfm-file-icon.xls { background: #f6ffed; color: #52c41a; }
.pfm-file-icon.ppt { background: #fff7e6; color: #fa8c16; }
.pfm-file-icon.image { background: #f9f0ff; color: #722ed1; }
.pfm-file-icon.zip { background: #fff0f6; color: #eb2f96; }
.pfm-file-icon.other { background: #f5f5f5; color: #999; }
.pfm-file-card:hover .pfm-file-icon {
    transform: scale(1.05);
}
.pfm-file-info { flex: 1; min-width: 0; }
.pfm-file-name {
    font-size: 14px;
    color: #1a1a2e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 500px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.pfm-file-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 5px;
    font-size: 12px;
    color: #aaa;
}
.pfm-file-meta span { display: flex; align-items: center; gap: 4px; }
.pfm-file-source {
    font-size: 12px;
    color: #b0b8c4;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}
.pfm-file-action {
    flex-shrink: 0;
    margin-left: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f5f5f5;
    transition: all 0.2s;
    opacity: 0.4;
}
.pfm-file-card:hover .pfm-file-action {
    opacity: 1;
    background: #e6f7ff;
}
.pfm-file-card:hover .pfm-file-action i {
    color: #1890ff !important;
}
.pfm-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
}
.pfm-tag-pdf { background: #fff1f0; color: #cf1322; }
.pfm-tag-doc { background: #e6f7ff; color: #096dd9; }
.pfm-tag-xls { background: #f6ffed; color: #389e0d; }
.pfm-tag-ppt { background: #fff7e6; color: #d48806; }
.pfm-tag-image { background: #f9f0ff; color: #531dab; }
.pfm-tag-zip { background: #fff0f6; color: #c41d7f; }
.pfm-tag-other { background: #f5f5f5; color: #999; }
.pfm-tag-category { background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; }

/* 批量下载按钮 */
.pfm-batch-dl {
    background: #e6f7ff !important;
    border: 1px solid #91d5ff !important;
    color: #1890ff !important;
    font-weight: 500;
    border-radius: 8px !important;
    transition: all 0.2s !important;
}
    border: 1px solid rgba(0,230,118,0.3) !important;
    color: #69f0ae !important;
    font-weight: 600;
    border-radius: 10px !important;
    transition: all 0.25s !important;
}
.pfm-batch-dl:hover {
    background: #1890ff !important;
    color: #fff !important;
    border-color: #1890ff !important;
}

/* 空状态 */
.pfm-empty-state {
    text-align: center;
    padding: 80px 20px;
    color: #bbb;
}
.pfm-empty-state i {
    font-size: 56px;
    color: #dde3ec;
    display: block;
    margin-bottom: 16px;
    animation: pfm-empty-float 3s ease-in-out infinite;
}
@keyframes pfm-empty-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.pfm-empty-state span { font-size: 14px; color: #bbb; }

/* 渐变色顶部装饰线 */
#pageProjectfiles {
    position: relative;
}
#pageProjectfiles::before {
    content: '';
    display: block;
    height: 3px;
    margin-bottom: 16px;
    border-radius: 2px;
    background: linear-gradient(90deg, #0d47a1, #1565c0, #00bcd4, #00e676, #7c4dff, #ff6d00, #0d47a1);
    background-size: 300% 100%;
    animation: pfm-gradient-flow 6s linear infinite;
}

/* ==================== 网页端考勤统计样式 ==================== */

.attendance-user-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 10px;
}

.attendance-user-tabs .tab-btn {
    padding: 8px 18px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fff;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.attendance-user-tabs .tab-btn:hover {
    border-color: #1890ff;
    color: #1890ff;
}

.attendance-user-tabs .tab-btn.active {
    background: #1890ff;
    color: #fff;
    border-color: #1890ff;
}

.att-web-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.att-web-summary .stat-item {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.03);
}

.att-web-summary .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.att-web-summary .stat-icon.green { background: #f6ffed; color: #52c41a; }
.att-web-summary .stat-icon.orange { background: #fff7e6; color: #fa8c16; }
.att-web-summary .stat-icon.blue { background: #e6f7ff; color: #1890ff; }
.att-web-summary .stat-icon.red { background: #fff1f0; color: #f5222d; }

.att-web-summary .stat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.att-web-summary .stat-num {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.att-web-summary .stat-label {
    font-size: 13px;
    color: #999;
}

.att-web-cal {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
}

.att-web-cal-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.att-web-cal-hd {
    font-size: 13px;
    color: #999;
    font-weight: 600;
    padding: 4px 0;
}

.att-web-cal-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.att-web-cal-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: default;
    transition: all 0.2s;
    min-height: 44px;
    padding: 4px 2px;
    position: relative;
}

.att-web-cal-cell.has-record {
    cursor: pointer;
}

.att-web-cal-cell.has-record:hover {
    background: #e6f7ff;
}

.att-web-cal-cell.has-record.normal {
    background: #f6ffed;
}

.att-web-cal-cell.has-record.late {
    background: #fff7e6;
}

.att-web-cal-cell.has-record.earlyLeave {
    background: #fff1f0;
}

.att-web-cal-cell.today {
    box-shadow: inset 0 0 0 2px #1890ff;
}

.att-web-cal-day {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
}

.att-web-cal-cell.today .att-web-cal-day {
    color: #1890ff;
}

.att-web-cal-status {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
    white-space: nowrap;
}

.att-web-cal-cell.has-record.normal .att-web-cal-status { color: #52c41a; }
.att-web-cal-cell.has-record.late .att-web-cal-status { color: #fa8c16; }
.att-web-cal-cell.has-record.earlyLeave .att-web-cal-status { color: #f5222d; }

/* ==================== 员工月度统计样式 ==================== */

.monthly-stat-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.monthly-stat-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
}

.monthly-stat-card .msc-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.monthly-stat-card .msc-icon.blue { background: #e6f7ff; color: #1890ff; }
.monthly-stat-card .msc-icon.green { background: #f6ffed; color: #52c41a; }
.monthly-stat-card .msc-icon.orange { background: #fff7e6; color: #fa8c16; }
.monthly-stat-card .msc-icon.red { background: #fff1f0; color: #f5222d; }
.monthly-stat-card .msc-icon.purple { background: #f9f0ff; color: #722ed1; }
.monthly-stat-card .msc-icon.cyan { background: #e6fffb; color: #13c2c2; }

.monthly-stat-card .msc-label {
    font-size: 12px;
    color: #999;
}

.monthly-stat-card .msc-value {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.monthly-mismatch-tip {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    border-left: 3px solid;
}

.monthly-mismatch-tip.warn {
    background: rgba(255,77,79,0.06);
    border-left-color: #f5222d;
    color: #f5222d;
}

.monthly-mismatch-tip.ok {
    background: rgba(82,196,113,0.06);
    border-left-color: #52c41a;
    color: #52c41a;
}

.monthly-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fafafa;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #f0f0f0;
}

.monthly-section-header h4 {
    margin: 0;
    font-size: 14px;
    color: #333;
}

.monthly-section-header h4 i {
    color: #1890ff;
    margin-right: 6px;
}

@media (max-width: 900px) {
    .monthly-stat-cards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .monthly-stat-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== 通知公告系统（科技感） ==================== */
.ntc-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.ntc-stat-card {
    background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
    border: 1px solid #eef0ff;
    border-radius: 14px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}
.ntc-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(108, 92, 231, .12);
    border-color: rgba(108, 92, 231, .3);
}
.ntc-sc-deco {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: .08;
}
.ntc-sc-total .ntc-sc-icon { background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff; }
.ntc-sc-total .ntc-sc-deco { background: #6c5ce7; }
.ntc-sc-unread .ntc-sc-icon { background: linear-gradient(135deg, #e17055, #fab1a0); color: #fff; }
.ntc-sc-unread .ntc-sc-deco { background: #e17055; }
.ntc-sc-announce .ntc-sc-icon { background: linear-gradient(135deg, #0984e3, #74b9ff); color: #fff; }
.ntc-sc-announce .ntc-sc-deco { background: #0984e3; }
.ntc-sc-today .ntc-sc-icon { background: linear-gradient(135deg, #00b894, #55efc4); color: #fff; }
.ntc-sc-today .ntc-sc-deco { background: #00b894; }
.ntc-sc-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.ntc-sc-info { flex: 1; }
.ntc-sc-num { font-size: 24px; font-weight: 700; color: #2d3436; line-height: 1.2; }
.ntc-sc-label { font-size: 12px; color: #b2bec3; margin-top: 2px; }

/* Tab 切换栏 */
.ntc-tab-bar {
    background: linear-gradient(135deg, #f0f2ff 0%, #f5f3ff 100%);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
}
.ntc-tab-inner {
    display: flex;
    gap: 4px;
}
.ntc-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: #636e72;
    font-size: 13px;
    cursor: pointer;
    border-radius: 9px;
    transition: all .25s ease;
    font-weight: 500;
}
.ntc-tab-btn:hover { background: rgba(255,255,255,.6); color: #2d3436; }
.ntc-tab-btn.active {
    background: #fff;
    color: #6c5ce7;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(108, 92, 231, .15);
}
.ntc-tab-btn i { font-size: 14px; }

/* 通知卡片列表 */
.ntc-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ntc-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #f0f0f5;
    cursor: pointer;
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
}
.ntc-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    transition: width .25s ease;
}
.ntc-card:hover {
    border-color: #d9d9f0;
    box-shadow: 0 4px 16px rgba(108, 92, 231, .08);
    transform: translateX(2px);
}
.ntc-card.unread {
    background: linear-gradient(90deg, #f5f3ff 0%, #fff 30%);
    border-left: 3px solid #6c5ce7;
}
.ntc-card.unread::before { width: 3px; background: #6c5ce7; }
.ntc-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.ntc-card-body { flex: 1; min-width: 0; }
.ntc-card-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2d3436;
}
.ntc-type-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 5px;
    font-weight: 500;
    white-space: nowrap;
}
.ntc-card-preview {
    font-size: 13px;
    color: #636e72;
    line-height: 1.6;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ntc-card-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #b2bec3;
}
.ntc-card-meta i { margin-right: 4px; }
.ntc-card-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .2s;
}
.ntc-card:hover .ntc-card-actions { opacity: 1; }
.ntc-top-badge {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: #fff;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 4px;
    margin-left: 6px;
    animation: ntc-pulse 2s infinite;
}
@keyframes ntc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}
.ntc-empty {
    text-align: center;
    padding: 60px 0;
    color: #b2bec3;
}
.ntc-empty i { font-size: 56px; margin-bottom: 16px; display: block; color: #dfe6e9; }

/* ==================== 审批中心 ==================== */
.approval-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.stat-card-small {
    background: #fff;
    border: 1px solid #f0f0f5;
    border-radius: 14px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all .25s ease;
}
.stat-card-small:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
}
.stat-card-small.blue .stat-icon { background: linear-gradient(135deg, #0984e3, #74b9ff); color: #fff; }
.stat-card-small.green .stat-icon { background: linear-gradient(135deg, #00b894, #55efc4); color: #fff; }
.stat-card-small.orange .stat-icon { background: linear-gradient(135deg, #fdcb6e, #f39c12); color: #fff; }
.stat-card-small.purple .stat-icon { background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff; }
.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.stat-info { flex: 1; }
.stat-num { font-size: 24px; font-weight: 700; color: #2d3436; display: block; line-height: 1.2; }
.stat-label { font-size: 12px; color: #b2bec3; margin-top: 2px; display: block; }

/* 审批列表 */
.approval-list { display: flex; flex-direction: column; gap: 12px; }
.approval-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #f0f0f5;
    transition: all .25s ease;
}
.approval-item:hover {
    border-color: #d9d9f0;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.approval-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.approval-item-body { flex: 1; min-width: 0; }
.approval-item-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #2d3436;
}
.approval-item-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #b2bec3;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.approval-item-footer {
    display: flex;
    align-items: center;
    gap: 12px;
}
.approval-item-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

/* 状态标签 */
.status-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
}
.status-tag.status-warning { background: #fff8e6; color: #f39c12; }
.status-tag.status-success { background: #e8f8f0; color: #00b894; }
.status-tag.status-danger { background: #ffeef0; color: #e17055; }

/* 审批流程时间线 */
.approval-timeline { margin-bottom: 20px; }
.approval-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    padding-bottom: 20px;
}
.approval-step:last-child { padding-bottom: 0; }
.approval-step::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 22px;
    bottom: 0;
    width: 2px;
    background: #dfe6e9;
}
.approval-step:last-child::before { display: none; }
.step-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.step-dot.done { background: #00b894; box-shadow: 0 0 0 4px rgba(0,184,148,.2); }
.step-dot.active { background: #f39c12; box-shadow: 0 0 0 4px rgba(243,156,18,.2); animation: step-blink 1.5s infinite; }
.step-dot.rejected { background: #e17055; box-shadow: 0 0 0 4px rgba(225,112,85,.2); }
@keyframes step-blink {
    0%, 100% { box-shadow: 0 0 0 4px rgba(243,156,18,.2); }
    50% { box-shadow: 0 0 0 8px rgba(243,156,18,.08); }
}
.step-info { flex: 1; }
.step-title { font-size: 14px; font-weight: 600; color: #2d3436; }
.step-desc { font-size: 12px; color: #b2bec3; margin-top: 2px; }

/* 详情字段 */
.detail-fields {
    background: #f8f9ff;
    border-radius: 12px;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.detail-field { display: flex; flex-direction: column; gap: 4px; }
.detail-label { font-size: 12px; color: #b2bec3; }
.detail-value { font-size: 13px; color: #2d3436; font-weight: 500; }

/* 响应式 */
@media (max-width: 900px) {
    .ntc-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .approval-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ntc-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ntc-stat-card { padding: 14px 12px; }
    .ntc-sc-num { font-size: 20px; }
    .ntc-tab-btn span { display: none; }
    .ntc-tab-btn { padding: 10px 12px; }
    .approval-stats { grid-template-columns: repeat(2, 1fr); }
     .approval-item { flex-wrap: wrap; }
     .approval-item-actions { width: 100%; justify-content: flex-end; margin-top: 8px; }
     .detail-fields { grid-template-columns: 1fr; }
     .ntc-card-actions { display: flex; opacity: 1; }
}

/* ==================== 内部通讯系统样式（微信风格） ==================== */

/* 主容器：左右分栏 */
.msg-container {
    display: flex;
    height: calc(100vh - 80px);
    background: #f5f5f5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* 左侧联系人面板 */
.msg-sidebar {
    width: 300px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #e8e8e8;
}
.msg-sidebar-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.msg-sidebar-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #2d3436;
}
.msg-search-wrap {
    padding: 8px 12px;
    flex-shrink: 0;
}
.msg-contact-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

/* 联系人列表项 */
.msg-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background .15s;
    border-left: 3px solid transparent;
}
.msg-contact-item:hover {
    background: #f5f6fa;
}
.msg-contact-item.msg-contact-active {
    background: #eef6ff;
    border-left-color: #07c160;
}
.msg-contact-avatar {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: linear-gradient(135deg, #07c160, #06ad56);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15px;
    flex-shrink: 0;
}
.msg-contact-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.msg-contact-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.msg-contact-name {
    font-weight: 600;
    font-size: 14px;
    color: #2d3436;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-contact-time {
    font-size: 11px;
    color: #b2bec3;
    flex-shrink: 0;
    margin-left: 8px;
}
.msg-contact-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.msg-contact-preview {
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.msg-unread-badge {
    background: #e53935;
    color: #fff;
    font-size: 11px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    font-weight: 600;
    flex-shrink: 0;
    margin-left: 6px;
}

/* 右侧聊天面板 */
.msg-chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    min-width: 0;
}
.msg-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ccc;
}
.msg-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}
.msg-empty-state p {
    font-size: 14px;
    margin: 0;
}
.msg-chat-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.msg-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0;
}
.msg-chat-title {
    font-weight: 600;
    font-size: 15px;
    color: #2d3436;
    display: flex;
    align-items: center;
    gap: 8px;
}
.msg-chat-actions {
    display: flex;
    gap: 8px;
}
.msg-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #e5e5e4;
}

/* 聊天气泡 */
.msg-bubble {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    max-width: 70%;
}
.msg-bubble-mine {
    align-self: flex-end;
    align-items: flex-end;
}
.msg-bubble-other {
    align-self: flex-start;
    align-items: flex-start;
}
.msg-bubble-meta {
    margin-bottom: 3px;
}
.msg-bubble-time {
    font-size: 11px;
    color: #999;
}
.msg-bubble-content {
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
}
.msg-bubble-content-mine {
    background: #95ec69;
    color: #2d3436;
    border-radius: 4px 0 4px 4px;
}
.msg-bubble-content-other {
    background: #fff;
    color: #2d3436;
    border-radius: 0 4px 4px 4px;
}

/* 消息输入栏 */
.msg-input-bar {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    flex-shrink: 0;
}
/* 输入栏上方：操作按钮行 */
.msg-input-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.msg-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
    color: #636e72;
    font-size: 16px;
}
.msg-action-btn:hover {
    background: #f0f0f0;
    color: #07c160;
}
/* 输入行：textarea + 发送按钮水平排列 */
.msg-input-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

/* 图片消息预览 */
.msg-image-wrap {
    margin-bottom: 4px;
}
.msg-image-preview {
    max-width: 200px;
    max-height: 200px;
    border-radius: 6px;
    cursor: pointer;
    display: block;
    object-fit: cover;
    transition: opacity .2s;
}
.msg-image-preview:hover {
    opacity: 0.85;
}

/* 文件消息卡片 */
.msg-file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
    min-width: 180px;
    max-width: 260px;
}
.msg-file-card:hover {
    background: rgba(0,0,0,0.08);
}
.msg-file-card > i {
    font-size: 28px;
    flex-shrink: 0;
    color: #07c160;
}
.msg-file-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.msg-file-name {
    font-size: 13px;
    font-weight: 500;
    color: #2d3436;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-file-size {
    font-size: 11px;
    color: #b2bec3;
}

/* badge-message 红点 */
#badge-message {
    position: absolute;
    top: 2px;
    right: -4px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    font-weight: 600;
}
#badge-message.show { display: inline-flex; }

/* 移动端适配 */
@media (max-width: 768px) {
    .msg-container {
        flex-direction: column;
        height: calc(100vh - 80px);
    }
    .msg-sidebar {
        width: 100%;
        min-width: 100%;
        flex: 1;
        border-right: none;
    }
    .msg-chat-panel {
        width: 100%;
        flex: 1;
        display: none;
    }
    .msg-chat-panel[style*="display: flex"] {
        display: flex !important;
    }
    .msg-bubble {
        max-width: 85%;
    }
    .msg-chat-header {
        padding-left: 8px;
    }
}

/* ==================== 签证详情按钮修复 ==================== */
.btn-secondary {
    padding: 10px 22px;
    background: #f5f7fa;
    color: #666;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
}
.btn-secondary:hover {
    background: #e8e8e8;
    color: #333;
}

.detail-actions .btn-danger {
    padding: 10px 22px;
    background: #fff2f0;
    color: #ff4d4f;
    border: 1px solid #ffa39e;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
}
.detail-actions .btn-danger:hover {
    background: #ff4d4f;
    color: #fff;
    border-color: #ff4d4f;
}

.detail-actions .btn-success {
    padding: 10px 22px;
    background: linear-gradient(135deg, #52c41a, #389e0d);
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(82,196,26,0.3);
}
.detail-actions .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(82,196,26,0.4);
}


/* 工资未录入空卡片样式 */
.payroll-empty {
    border: 2px dashed #ddd !important;
    background: #fafafa !important;
    cursor: pointer;
    transition: all 0.2s;
}
.payroll-empty:hover {
    border-color: #4CAF50 !important;
    background: #f0f9f0 !important;
    box-shadow: 0 2px 8px rgba(76,175,80,0.15);
}
.payroll-empty .payroll-card-header {
    border-bottom: 1px dashed #eee;
}
.payroll-empty .payroll-type-badge {
    opacity: 0.7;
}