/* KPI ERP System Styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #1a73e8;
    --primary-dark: #1557b0;
    --secondary: #5f6368;
    --accent: #ea4335;
    --success: #34a853;
    --warning: #fbbc04;
    --danger: #ea4335;
    --light: #e8f0fe;
    --dark: #202124;
    --gray: #5f6368;
    --white: #FFFFFF;
    --bg-main: #f8f9fa;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-hover: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.08);
    --radius: 8px;
    --radius-lg: 12px;
}

body {
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    background: #F5F7FA;
    color: #333;
    min-height: 100vh;
}

/* ==================== 登录页 ==================== */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.login-container {
    width: 100%;
    max-width: 380px;
    padding: 20px;
}

.login-box {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
}

.login-header {
    background: var(--white);
    color: var(--primary);
    padding: 40px 30px 30px;
    text-align: center;
}

.login-header h1 {
    font-size: 26px;
    margin-bottom: 8px;
    font-weight: 600;
}

.login-header p {
    font-size: 14px;
    color: var(--gray);
}

.login-form {
    padding: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--primary);
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--secondary);
}

.btn-login {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(26,115,232,0.3);
}

.btn-login:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26,115,232,0.4);
}

.btn-login:active:not(:disabled) {
    transform: translateY(0);
}

.btn-login:disabled {
    background: #CCC;
    cursor: not-allowed;
    box-shadow: none;
}

.error-msg {
    color: var(--danger);
    text-align: center;
    margin-top: 15px;
    min-height: 20px;
}

.login-footer {
    background: #F5F5F5;
    padding: 15px;
    text-align: center;
    font-size: 12px;
    color: var(--gray);
}

/* ==================== 导航栏 ==================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--white);
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border-bottom: 1px solid #e0e0e0;
}

.nav-brand {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary);
}

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

.role-badge {
    background: var(--light);
    color: var(--primary);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.btn-logout {
    background: var(--white);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 6px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
}

.btn-logout:hover {
    background: var(--primary);
    color: var(--white);
}

/* ==================== 侧边栏 ==================== */

.sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    width: 220px;
    height: calc(100vh - 60px);
    background: var(--white);
    box-shadow: 1px 0 3px rgba(0,0,0,0.05);
    padding: 16px 0;
    z-index: 999;
    border-right: 1px solid #e8e8e8;
}

.menu-item {
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
    color: var(--gray);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-item:hover {
    background: var(--light);
    color: var(--primary);
}

.menu-item.active {
    background: var(--light);
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 600;
}

.admin-only {
    display: none;
}

body.is-admin .admin-only,
body.is-manager .admin-only {
    display: block;
}

/* 经理专属 - 经理/总经理/管理员可见 */
body.is-manager .manager-only,
body.is-admin .manager-only {
    display: block;
}
/* 普通员工隐藏经理专属菜单 */
body.is-employee .manager-only {
    display: none !important;
}

/* 评分录入菜单：经理/管理员显示"✏️ 评分录入"，普通员工隐藏 */
body.is-admin .scoring-menu,
body.is-manager .scoring-menu {
    display: flex !important;
}
/* 普通员工隐藏评分录入菜单（只显示考核结果） */
body.is-employee .scoring-menu {
    display: none !important;
}

/* ===== 考核结果页（员工视角） ===== */
/* 员工：隐藏员工选择下拉框，只显示年月 */
body.is-employee #scoringUser {
    display: none;
}
/* 员工：隐藏经理操作提示 */
body.is-employee .manager-scoring-tip {
    display: none;
}
/* 经理：隐藏员工提示区 */
body.is-admin .employee-notice,
body.is-manager .employee-notice {
    display: none !important;
}




/* ==================== 员工视角 ==================== */

/* 隐藏管理员专属菜单项 */
body:not(.is-admin) .admin-only {
    display: none !important;
}

/* 管理员显示 admin-only 元素 */
body.is-admin .admin-only {
    display: block !important;
}

/* 员工提示 - 员工视角显示 */
body.is-employee .employee-notice {
    background: #e8f4fd;
    border: 1px solid #b8daff;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #004085;
    font-size: 14px;
}

/* 经理/管理员视角的提示 */
body.is-admin .employee-notice,
body.is-manager .employee-notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #856404;
    font-size: 14px;
}

/* 数据来源标签 */
.data-source-tag {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 8px;
}

/* 考核周期标识 */
.cycle-badge {
    background: #fff3cd;
    color: #856404;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-left: 8px;
}

/* 累计数据提示 */
.cumulative-tip {
    background: #e3f2fd;
    color: #1565c0;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    margin-left: 6px;
}

/* KPI项目 - 年度考核边框 */
.kpi-item[style*="border-left:3px solid #e74c3c"] {
    background: linear-gradient(90deg, rgba(231,76,60,0.05) 0%, transparent 100%);
}

/* KPI项目 - 季度考核边框 */
.kpi-item[style*="border-left:3px solid #f39c12"] {
    background: linear-gradient(90deg, rgba(243,156,18,0.05) 0%, transparent 100%);
}

/* 平时表现区域 - 员工只能查看（工作态度由主管评） */
body.is-employee #attendance,
body.is-employee #behavior,
body.is-employee #attitude {
    background: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

/* KPI输入框 - 员工查看他人数据时只读 */
body.is-employee .kpi-actual-input {
    background: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

/* 隐藏员工视角的保存按钮 */
body.is-employee .btn-save {
    display: none !important;
}

/* ==================== 主内容区 ==================== */

.main-content {
    margin-left: 220px;
    margin-top: 60px;
    padding: 28px;
    min-height: calc(100vh - 60px);
    background: var(--bg-main);
}

.page {
    display: none;
    padding-bottom: 40px;
}

.page.active {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

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

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h2 {
    font-size: 22px;
    color: var(--dark);
    font-weight: 600;
}

.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.header-actions select {
    padding: 8px 16px;
    border: 1px solid #dadce0;
    border-radius: var(--radius);
    background: var(--white);
    font-size: 14px;
    cursor: pointer;
    color: var(--dark);
    transition: border-color 0.2s;
}

.header-actions select:focus {
    outline: none;
    border-color: var(--primary);
}

/* ==================== 按钮 ==================== */

.btn-export, .btn-save, .btn-init {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
    transition: all 0.3s;
}

.btn-export {
    background: var(--success);
    color: var(--white);
    box-shadow: 0 2px 6px rgba(52,168,83,0.3);
}

.btn-export:hover {
    background: #2d9348;
    box-shadow: 0 4px 10px rgba(52,168,83,0.4);
}

.btn-add {
    background: var(--accent);
    color: var(--white);
    box-shadow: 0 2px 6px rgba(234,67,53,0.3);
}

.btn-add:hover {
    background: #d33828;
    box-shadow: 0 4px 10px rgba(234,67,53,0.4);
}

.btn-save {
    background: var(--primary);
    color: var(--white);
    padding: 14px 40px;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(26,115,232,0.3);
}

.btn-save:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 12px rgba(26,115,232,0.4);
}

.btn-small {
    padding: 6px 12px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-edit {
    background: var(--primary);
    color: var(--white);
}

.btn-edit:hover {
    background: var(--primary-dark);
}

.btn-delete {
    background: var(--danger);
    color: var(--white);
}

.btn-delete:hover {
    background: #c62828;
}

.btn-init {
    background: var(--accent);
    color: var(--white);
}

.btn-init:hover {
    background: #d33828;
}

/* ==================== 数据表格 ==================== */

.summary-table-container, .mykpi-table-container {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow-x: auto;
}

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

.data-table th {
    background: var(--primary);
    color: var(--white);
    padding: 14px 12px;
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
}

.data-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #f1f3f4;
}

.data-table tbody tr:hover {
    background: #f8f9fa;
}

.data-table tbody tr:nth-child(even) {
    background: #FAFBFC;
}

/* 部门分组行 */
.dept-header-row td {
    background: linear-gradient(90deg, #f0f4ff 0%, #e8ecf8 100%) !important;
    color: #2c3e70;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 12px !important;
    text-align: left !important;
    border-bottom: 2px solid #c5cfec;
}

.dept-header-cell {
    letter-spacing: 0.5px;
}

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

/* 等级颜色 */
.grade-a { color: #ea4335; font-weight: bold; }
.grade-b { color: #fbbc04; font-weight: bold; }
.grade-c { color: #5f6368; }
.grade-d { color: #808080; }
.grade-e { color: #ea4335; }

/* 排名 */
.rank-1 { color: #fbbc04; font-size: 18px; }
.rank-2 { color: #9aa0a6; font-size: 16px; }
.rank-3 { color: #e37400; font-size: 14px; }

/* ==================== 评分录入 ==================== */

.score-section {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}

.score-section h3 {
    color: var(--dark);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e8e8;
    font-weight: 600;
}

.score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.score-item {
    background: var(--bg-main);
    padding: 16px;
    border-radius: var(--radius);
}

.score-item label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--gray);
    font-size: 13px;
}

.score-item input {
    width: 100%;
    padding: 10px;
    border: 2px solid #dadce0;
    border-radius: var(--radius);
    font-size: 16px;
    text-align: center;
    transition: border-color 0.2s;
}

.score-item input:focus {
    border-color: var(--primary);
    outline: none;
}

.perf-preview, .kpi-preview {
    margin-top: 20px;
    padding: 16px;
    background: var(--light);
    border-radius: 6px;
    font-size: 16px;
}

.kpi-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: #F8F9FA;
    border-radius: 6px;
    margin-bottom: 12px;
}

.kpi-item .kpi-name {
    flex: 2;
    font-weight: 500;
}

.kpi-item .kpi-info {
    flex: 1;
    color: var(--gray);
    font-size: 13px;
}

.kpi-item .kpi-input {
    flex: 1;
}

.kpi-item .kpi-input input {
    width: 100%;
    padding: 8px;
    border: 2px solid #DDD;
    border-radius: 6px;
    text-align: center;
}

.kpi-item .kpi-score {
    flex: 0 0 80px;
    text-align: right;
    font-weight: 600;
    color: var(--success);
}

.total-section {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: var(--white);
}

.total-section h3 {
    color: var(--white);
    border-bottom-color: rgba(255,255,255,0.3);
}

.total-display {
    font-size: 18px;
    margin-bottom: 20px;
}

.total-result {
    font-size: 32px;
    font-weight: bold;
    margin-left: 20px;
}

.grade-display {
    font-size: 24px;
    margin-bottom: 24px;
}

.total-section .btn-save {
    background: var(--white);
    color: var(--primary);
}

.total-section .btn-save:hover {
    background: var(--light);
}

/* ==================== 悬浮保存按钮 ==================== */
.btn-save-float {
    position: fixed;
    bottom: 32px;
    right: 36px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--accent) 0%, #e06020 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    box-shadow: 0 6px 24px rgba(237,125,49,0.45);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.btn-save-float:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(237,125,49,0.55);
}

.btn-save-float:active {
    transform: translateY(0);
}

/* ==================== KPI配置状态徽章 ==================== */

.status-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-right: 12px;
}

.status-badge.draft {
    background: #fff3e0;
    color: #e65100;
}

.status-badge.submitted {
    background: #e8f5e9;
    color: #2e7d32;
}

.config-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: #f8f9fa;
    border-radius: 0 0 8px 8px;
    border-top: 1px solid #eee;
}

.btn-submit {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.btn-submit:active {
    transform: translateY(0);
}

.config-hint {
    color: #888;
    font-size: 12px;
    margin-left: 8px;
}

.hint {
    text-align: center;
    color: var(--gray);
    padding: 40px;
    font-size: 14px;
}

/* ==================== 我的KPI ==================== */

.user-info-card {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: var(--white);
    padding: 24px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.user-info-card h3 {
    font-size: 24px;
    margin-bottom: 8px;
}

.user-info-card p {
    opacity: 0.8;
}

.mykpi-summary {
    background: var(--white);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    font-size: 18px;
    margin-top: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.mykpi-summary span {
    font-weight: bold;
    color: var(--primary);
    font-size: 24px;
}

/* ==================== 用户列表 ==================== */

.user-list {
    background: var(--white);
    border-radius: 8px;
    padding: 24px;
}

.account-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #F8F9FA;
    border-radius: 8px;
    margin-bottom: 12px;
}

.account-info {
    display: flex;
    gap: 20px;
}

.account-info span {
    min-width: 100px;
}

.init-message {
    padding: 20px;
    background: #E8F5E9;
    border-radius: 8px;
    color: var(--success);
    text-align: center;
}

.init-message .accounts {
    margin-top: 16px;
    text-align: left;
    background: var(--white);
    padding: 16px;
    border-radius: 6px;
    font-size: 13px;
}

/* ==================== 响应式 ==================== */

@media (max-width: 1200px) {
    .data-table {
        font-size: 12px;
    }
    .data-table th, .data-table td {
        padding: 8px 4px;
    }
}

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }
    .main-content {
        margin-left: 0;
    }
}

/* ==================== KPI配置 ==================== */

.kpi-config-table {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow-x: auto;
    margin-bottom: 20px;
}

.kpi-config-table input,
.kpi-config-table select {
    padding: 8px 12px;
    border: 1px solid #DDD;
    border-radius: 4px;
    font-size: 13px;
    width: 100%;
}

.kpi-config-table input:focus,
.kpi-config-table select:focus {
    outline: none;
    border-color: var(--secondary);
}

.kpi-config-table th {
    min-width: 120px;
}

.kpi-config-table th:nth-child(1) { min-width: 180px; }
.kpi-config-table th:nth-child(2) { min-width: 80px; }
.kpi-config-table th:nth-child(3) { min-width: 100px; }
.kpi-config-table th:nth-child(4) { min-width: 120px; }
.kpi-config-table th:nth-child(5) { min-width: 150px; }
.kpi-config-table th:nth-child(6) { min-width: 100px; }

.config-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--white);
    border-radius: 8px;
}

.config-hint {
    color: var(--gray);
    font-size: 13px;
}

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

/* ==================== 年度目标管理 ==================== */

.goals-container {
    padding: 0;
    padding-bottom: 120px; /* 确保底部按钮可见 */
}

.goals-instructions {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border-left: 4px solid #1976D2;
    padding: 16px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.goals-instructions p {
    margin: 0 0 8px 0;
    color: #1565C0;
}

.goals-instructions ul {
    margin: 0;
    padding-left: 20px;
    color: #1976D2;
    font-size: 14px;
}

.goals-instructions li {
    margin-bottom: 4px;
}

/* ========== 年度完成度汇总 ========== */
.goals-summary {
    background: linear-gradient(135deg, #1F3864 0%, #2E75B6 100%);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    color: white;
}

.goals-summary h4 {
    margin-bottom: 15px;
    font-size: 16px;
    opacity: 0.9;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

.summary-item {
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px 15px;
}

.summary-item.qual-item {
    background: rgba(123, 31, 162, 0.3);
    border-left: 3px solid #7b1fa2;
}

.summary-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
}

.summary-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-fill.low { background: #FFC000; }
.progress-fill.good { background: #70AD47; }
.progress-fill.over { background: #70AD47; }

.progress-text {
    font-size: 13px;
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}

.goals-table-container {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow-x: auto;
    margin-bottom: 24px;
}

/* ========== 月度填报 ========== */
.report-container {
    max-width: 1600px;
}

.report-instructions {
    background: #fff3e0;
    border-left: 4px solid #ED7D31;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
}

.report-instructions strong {
    color: #E65100;
}

.report-summary {
    background: linear-gradient(135deg, #1F3864 0%, #2E75B6 100%);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    color: white;
}

.report-summary h4 {
    margin-bottom: 15px;
    font-size: 16px;
    opacity: 0.9;
}

.summary-item.warn {
    background: rgba(192, 0, 0, 0.3) !important;
    border-left: 3px solid #C00000 !important;
}

.report-table-container {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow-x: auto;
    margin-bottom: 20px;
}

.report-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.report-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.report-input {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
}

.report-input.locked {
    background: #f5f5f5;
    color: #999;
}

.report-input:focus {
    border-color: var(--secondary);
    outline: none;
}

.target-ref {
    font-size: 10px;
    color: #888;
}

.rate-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
}

.rate-good { background: #e8f5e9; color: #2e7d32; }
.rate-mid { background: #fff3e0; color: #e65100; }
.rate-low { background: #ffebee; color: #c62828; }

/* 全年累计完成率 */
.annual-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    margin-left: 8px;
    vertical-align: middle;
}
.annual-rate {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 8px;
    display: block;
    margin-top: 4px;
    white-space: nowrap;
}

/* 月度填报单元格状态 */
.locked-cell { background: #f9f9f9; opacity: 0.8; }
.current-cell { background: #fffde7; border: 2px solid #ffc107; }
.past-cell { background: #f0f0f0; color: #888; }

.report-summary .qual-badge {
    font-size: 14px;
}

.goals-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px;
}

.goals-table th,
.goals-table td {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid #EEE;
    font-size: 13px;
}

.goals-table th {
    background: var(--primary);
    color: var(--white);
    font-weight: 600;
    position: sticky;
    top: 0;
}

.goals-table th:first-child {
    text-align: left;
    padding-left: 20px;
}

.goals-table td:first-child {
    text-align: left;
    padding-left: 20px;
    font-weight: 500;
    color: #333;
}

.goals-table td:first-child span {
    font-weight: normal;
    color: var(--gray);
    font-size: 12px;
}

.goals-table tbody tr:hover {
    background: #F8F9FA;
}

.goals-table input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #DDD;
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
}

.goals-table input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
}

.goals-table input.annual-input {
    background: #FFF3E0;
    font-weight: 600;
}

.goals-table input.annual-input.locked {
    background: #F5F5F5;
    color: #888;
    font-weight: 400;
    cursor: not-allowed;
}

/* KPI名称可编辑输入框 */
.goals-table input.kpi-name-input {
    background: #FFF8E1;
    font-weight: 600;
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid #FFB74D;
    border-radius: 4px;
    min-width: 200px;
}

.goals-table input.kpi-name-input:focus {
    outline: none;
    border-color: #FF9800;
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2);
}

/* 月份单元格包裹层 */
.month-cell-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* 跳过/恢复按钮 */
.skip-toggle {
    display: none;
    padding: 1px 4px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    line-height: 1.4;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.goals-table td:hover .skip-toggle {
    display: inline-flex;
}

.skip-btn {
    background: #ffebee;
    color: #e53935;
}
.skip-btn:hover { background: #ef9a9a; }

.restore-btn {
    background: #e8f5e9;
    color: #43a047;
    font-size: 11px;
    padding: 2px 6px;
}
.restore-btn:hover { background: #a5d6a7; }

/* 跳过月份 - 年度目标页 */
.goals-table td.month-skipped {
    background: #f5f5f5 !important;
    text-align: center;
    vertical-align: middle;
    border: 1px dashed #ddd;
    color: #bbb;
    font-size: 11px;
    padding: 4px 2px;
}

.skip-label {
    font-size: 11px;
    color: #bbb;
    display: block;
    text-align: center;
}

/* 跳过月份 - 月度填报页 */
td.month-skipped-report {
    background: #fafafa !important;
    text-align: center;
    vertical-align: middle;
    border: 1px dashed #e0e0e0;
}

.skip-label-report {
    color: #ccc;
    font-size: 18px;
    font-weight: 300;
}

/* 月度考核计数badge */
.kpi-month-count {
    margin-top: 2px;
}
.month-count-badge {
    background: #e8f5e9;
    color: #388e3c;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 500;
}

/* 年度总目标列的提示区域 */
.qual-sum-area {
    min-height: 0;
}

.goals-table input.month-input.locked {
    background: #F5F5F5;
    color: #999;
    cursor: not-allowed;
}

.goals-table input.month-input {
    background: #E8F5E9;
}

/* 年度目标锁定提示 */
.goals-lock-banner {
    margin-top: 12px;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
}

.goal-lock-note {
    color: #d32f2f;
    font-weight: 600;
}

.goal-unlocked {
    color: #388E3C;
    font-weight: 400;
}

.goals-table .target-label {
    font-size: 11px;
    color: var(--gray);
    margin-top: 2px;
}

.goals-table th.annual-col {
    background: #FF9800;
}

.goals-table th.month-col {
    background: #4CAF50;
}

/* 已过月份列头：灰绿色，表示可补填但已过期 */
.goals-table th.month-col.past-month {
    background: #78909C;
    color: #eceff1;
    opacity: 0.85;
}

/* 锁定状态的输入框 */
.goals-table input.locked,
.annual-input.locked {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    border-color: #e0e0e0;
}

/* 定性型KPI样式 */
.qual-badge {
    background: #7b1fa2;
    color: white;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.text-muted {
    color: #aaa;
}

.text-danger {
    color: #dc3545;
}

.qual-cell {
    text-align: center !important;
}

.qual-checkbox {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: #388E3C;
}

.goals-table .qual-cell[style*="e8f5e9"] {
    background: #e8f5e9;
}

/* 评分页定性KPI */
.kpi-item-qual {
    background: #f3e5f5 !important;
    border-left: 3px solid #7b1fa2;
}

/* KPI配置页类型选择 */
.kpi-type-select {
    padding: 5px 8px;
    border-radius: 5px;
    border: 1.5px solid #ccc;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}

.kpi-type-select:focus {
    border-color: var(--primary);
    outline: none;
}

.qual-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.qual-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #7b1fa2;
}

.qual-label {
    font-size: 14px;
    font-weight: 600;
    color: #7b1fa2;
}

.kpi-item-qual .kpi-score {
    color: #7b1fa2;
}

.goals-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--white);
    border-radius: 8px;
}

@media (max-width: 768px) {
    .goals-table {
        font-size: 12px;
    }
    .goals-table th,
    .goals-table td {
        padding: 8px 4px;
    }
}

/* ==================== 用户管理树形视图 ==================== */

/* 树容器 */
.um-tree {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 部门块 */
.um-dept-block {
    border: 1.5px solid #e0e7f3;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(31,56,100,0.06);
}

/* 部门头部 */
.um-dept-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s;
}

.um-dept-header:hover { opacity: 0.92; }

.um-dept-icon { font-size: 18px; }

.um-dept-name {
    font-size: 15px;
    font-weight: 600;
    flex: 1;
}

.um-dept-count {
    font-size: 12px;
    background: rgba(255,255,255,0.2);
    padding: 2px 10px;
    border-radius: 10px;
}

.um-dept-chevron {
    font-size: 16px;
    transition: transform 0.2s;
    min-width: 16px;
    text-align: center;
}

/* 部门体 */
.um-dept-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 经理块（包含经理行+下属员工） */
.um-manager-block {
    background: #f7faff;
    border: 1px solid #dce8f8;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 4px;
}

.um-manager-block > .um-user-row:first-child {
    background: #edf3fc;
    border-bottom: 1px solid #dce8f8;
}

/* 用户行 */
.um-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    transition: background 0.15s;
}

.um-user-row:hover { background: #f0f5ff; }

.um-user-row.um-indent {
    padding-left: 36px;
    border-radius: 0;
    background: #fff;
}

.um-user-row.um-indent:hover { background: #f5f8ff; }

/* 头像圆圈 */
.um-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--accent));
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 用户信息 */
.um-user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.um-user-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a2a4a;
}

.um-user-sub {
    font-size: 12px;
    color: #888;
}

/* role-tag 保持不变 */

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

.badge-admin   { background: #FDECEA; color: #C00; }
.badge-manager { background: #E8F5E9; color: #2E7D32; }
.badge-emp     { background: #E3F2FD; color: #1565C0; }

/* ==================== Modal 弹窗 ==================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-box {
    background: #fff;
    border-radius: 12px;
    width: 480px;
    max-width: 95vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    overflow: hidden;
    animation: modalIn 0.2s ease;
}

.modal-box-sm {
    width: 380px;
}

@keyframes modalIn {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.modal-header {
    background: var(--primary);
    color: #fff;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-size: 16px;
    margin: 0;
}

.modal-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.modal-close:hover { color: #fff; }

.modal-body {
    padding: 24px;
}

.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    gap: 12px;
}

.form-row label {
    width: 72px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    color: #444;
}

.form-row input,
.form-row select {
    flex: 1;
    padding: 9px 12px;
    border: 1.5px solid #DDD;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.form-row input:focus,
.form-row select:focus {
    border-color: var(--secondary);
}

.form-row input:disabled {
    background: #f5f5f5;
    color: #999;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
}

.btn-cancel {
    padding: 9px 22px;
    border: 1.5px solid #ccc;
    background: #fff;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    color: #555;
}

.btn-cancel:hover { background: #f0f0f0; }

.btn-save-sm {
    padding: 9px 22px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-save-sm:hover { background: var(--secondary); }

/* ==================== 工作流引导 ==================== */

.workflow-guide {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow-x: auto;
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.workflow-step.done {
    opacity: 1;
}

.wf-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ccc;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.workflow-step.done .wf-num {
    background: #388e3c;
}

.wf-text {
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
}

.wf-text small {
    font-size: 11px;
    color: #888;
}

.wf-arrow {
    color: #ccc;
    font-size: 20px;
    margin: 0 12px;
    flex-shrink: 0;
}

/* 快速操作面板 */
.quick-actions-panel {
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.qa-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.qa-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.qa-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #f8f9fa;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    flex: 1;
    min-width: 200px;
}

.qa-card:hover {
    border-color: var(--secondary);
    background: #e3f2fd;
}

.qa-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.qa-info {
    flex: 1;
}

.qa-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.qa-desc {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.qa-status {
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

/* 批量设置面板 */
.batch-goals-panel {
    background: #e3f2fd;
    border: 2px solid #1976d2;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.batch-header {
    display: flex;
    align-items: center;
}

/* 说明条 */
.page-instructions {
    font-size: 13px;
    line-height: 1.8;
}

.page-instructions ul {
    margin: 0;
}

/* 年度目标页操作按钮 */
#btnAutoSplit {
    padding: 10px 20px;
    background: #f57c00;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 8px;
    transition: background 0.2s;
}

#btnAutoSplit:hover {
    background: #e65100;
}

/* ==================== 新版设计系统 v2 ==================== */

/* ---- 页面内容容器 ---- */
.page-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---- 通用卡片 ---- */
.kpi-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    padding: 20px 24px;
    transition: box-shadow 0.2s;
}
.kpi-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}

/* ---- 卡片头部 ---- */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f2f5;
}
.card-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: #1a2a4a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-header .card-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 500;
}

/* ---- 统计卡片 ---- */
.stat-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 4px;
}
.stat-card {
    background: var(--white);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
}
.stat-card.blue::before { background: var(--secondary); }
.stat-card.green::before { background: var(--success); }
.stat-card.orange::before { background: var(--accent); }
.stat-card.purple::before { background: #7b1fa2; }
.stat-card.red::before { background: var(--danger); }

.stat-label {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #1a2a4a;
    line-height: 1.1;
}
.stat-sub {
    font-size: 12px;
    color: #aaa;
}

/* ---- 等级徽章 ---- */
.grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    min-width: 60px;
    text-align: center;
}
.grade-badge.s { background: linear-gradient(135deg,#7b1fa2,#9c27b0); color: #fff; }
.grade-badge.a { background: linear-gradient(135deg,#1565c0,#1976d2); color: #fff; }
.grade-badge.b { background: linear-gradient(135deg,#2e7d32,#43a047); color: #fff; }
.grade-badge.c { background: linear-gradient(135deg,#f57c00,#fb8c00); color: #fff; }
.grade-badge.d { background: linear-gradient(135deg,#c62828,#e53935); color: #fff; }
.grade-badge.nodata { background: #e0e0e0; color: #888; }

/* ---- 进度条 ---- */
.progress-track {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.progress-track .track {
    flex: 1;
    height: 8px;
    background: #e8eaf0;
    border-radius: 4px;
    overflow: hidden;
}
.progress-track .fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-track .fill.red   { background: linear-gradient(90deg, #ef5350, #e53935); }
.progress-track .fill.orange{ background: linear-gradient(90deg, #ffa726, #fb8c00); }
.progress-track .fill.blue  { background: linear-gradient(90deg, #42a5f5, #1e88e5); }
.progress-track .fill.green { background: linear-gradient(90deg, #66bb6a, #43a047); }
.progress-track .pct {
    font-size: 12px;
    font-weight: 600;
    min-width: 44px;
    text-align: right;
    color: #555;
}

/* ---- 环形分数 ---- */
.score-ring-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}
.score-ring {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}
.score-ring svg {
    width: 72px;
    height: 72px;
    transform: rotate(-90deg);
}
.score-ring circle {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.score-ring .bg { stroke: #e8eaf0; }
.score-ring .fg {
    stroke-dasharray: 188.5;
    stroke-dashoffset: 188.5;
}
.score-ring .ring-val {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #1a2a4a;
}
.score-ring .ring-label {
    font-size: 12px;
    color: #888;
    font-weight: 500;
}

/* ---- KPI项卡片 ---- */
.kpi-item-card {
    background: var(--white);
    border-radius: 10px;
    padding: 16px 20px;
    border: 1.5px solid #e8eaf0;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.kpi-item-card:hover {
    border-color: var(--secondary);
    box-shadow: 0 2px 12px rgba(46,117,182,0.1);
}
.kpi-item-card .kpi-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a2a4a;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.kpi-item-card .kpi-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
}
.kpi-item-card .kpi-meta span { display: flex; align-items: center; gap: 4px; }
.kpi-item-card .kpi-nums {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
}
.kpi-item-card .kpi-nums strong { color: #1a2a4a; font-size: 15px; }
.kpi-item-card .kpi-nums .vs { color: #aaa; font-size: 11px; }

/* ---- 月度网格 ---- */
.month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.month-cell {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
    font-size: 12px;
    transition: background 0.2s;
}
.month-cell.passed { background: #e3f2fd; }
.month-cell.current { background: #fff3e0; border: 2px solid #ffc107; }
.month-cell.future { background: #f5f5f5; color: #aaa; }
.month-cell .m-label { color: #888; margin-bottom: 4px; font-size: 11px; }
.month-cell .m-val { font-weight: 600; color: #1a2a4a; font-size: 14px; }
.month-cell .m-rate { font-size: 11px; margin-top: 2px; }
.month-cell .m-rate.over { color: #2e7d32; }
.month-cell .m-rate.mid { color: #e65100; }
.month-cell .m-rate.low { color: #c62828; }

/* ---- 评分总分展示 ---- */
.total-score-display {
    background: linear-gradient(135deg, #1F3864 0%, #2E75B6 100%);
    border-radius: 16px;
    padding: 28px 32px;
    color: #fff;
    text-align: center;
    margin-bottom: 4px;
}
.total-score-display .big-num {
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.total-score-display .big-label {
    font-size: 14px;
    opacity: 0.8;
    margin-top: 4px;
}
.total-score-display .big-grade {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 20px;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
}
.total-score-display .formula {
    font-size: 13px;
    opacity: 0.7;
    margin-top: 10px;
}

/* ---- KPI填写行 ---- */
.kpi-fill-row {
    display: grid;
    grid-template-columns: 1fr 160px 120px 120px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1.5px solid transparent;
    transition: border-color 0.2s;
}
.kpi-fill-row:hover { border-color: #c5d5ea; }
.kpi-fill-row .kpi-fill-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a2a4a;
}
.kpi-fill-row .kpi-fill-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}
.kpi-fill-row .kpi-fill-target { font-size: 12px; color: #888; text-align: center; }
.kpi-fill-row .kpi-fill-input input {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    transition: border-color 0.2s;
}
.kpi-fill-row .kpi-fill-input input:focus {
    outline: none;
    border-color: var(--secondary);
}
.kpi-fill-row .kpi-fill-rate { text-align: center; font-weight: 600; font-size: 13px; }
.kpi-fill-row .kpi-fill-rate.over { color: #2e7d32; }
.kpi-fill-row .kpi-fill-rate.mid  { color: #e65100; }
.kpi-fill-row .kpi-fill-rate.low  { color: #c62828; }
.kpi-fill-row.kpi-qual-row {
    grid-template-columns: 1fr 160px 120px;
}

/* ---- 月度完成度网格 ---- */
.month-progress-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}
.month-progress-cell {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    font-size: 12px;
    border: 1.5px solid transparent;
}
.month-progress-cell.passed { background: #e8f5e9; border-color: #c8e6c9; }
.month-progress-cell.current { background: #fff8e1; border-color: #ffe082; }
.month-progress-cell .mp-label { color: #888; margin-bottom: 6px; font-size: 11px; }
.month-progress-cell .mp-bar {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    margin: 6px 0 4px;
}
.month-progress-cell .mp-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.month-progress-cell .mp-fill.red    { background: #ef5350; }
.month-progress-cell .mp-fill.orange{ background: #ffa726; }
.month-progress-cell .mp-fill.blue   { background: #42a5f5; }
.month-progress-cell .mp-fill.green  { background: #66bb6a; }
.month-progress-cell .mp-val { font-size: 13px; font-weight: 700; color: #1a2a4a; }
.month-progress-cell .mp-target { font-size: 10px; color: #aaa; margin-top: 2px; }

/* ---- KPI配置卡片 ---- */
.kpi-config-card {
    background: var(--white);
    border-radius: 10px;
    padding: 16px 20px;
    border: 1.5px solid #e0e7f3;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 2fr 1fr 0.8fr 1.2fr 1.5fr 1fr auto;
    gap: 12px;
    align-items: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.kpi-config-card:hover {
    border-color: var(--secondary);
    box-shadow: 0 2px 12px rgba(46,117,182,0.1);
}
.kpi-config-card input,
.kpi-config-card select {
    padding: 8px 10px;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    width: 100%;
    transition: border-color 0.2s;
}
.kpi-config-card input:focus,
.kpi-config-card select:focus {
    outline: none;
    border-color: var(--secondary);
}
.kpi-config-card .kpi-num {
    font-size: 12px;
    color: #888;
    text-align: center;
}
.kpi-config-card .kpi-config-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a2a4a;
}

/* ---- 行为指标评分 ---- */
.perf-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}
.perf-metric-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 2px solid #e8eaf0;
    transition: border-color 0.2s, transform 0.2s;
}
.perf-metric-card:hover {
    border-color: var(--secondary);
    transform: translateY(-2px);
}
.perf-metric-card .pm-icon {
    font-size: 28px;
    margin-bottom: 8px;
}
.perf-metric-card .pm-label {
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}
.perf-metric-card input {
    width: 80px;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 8px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    transition: border-color 0.2s;
}
.perf-metric-card input:focus {
    outline: none;
    border-color: var(--secondary);
}
.perf-metric-card input.default { border-color: #e0e0e0; background: #f8f9fa; }
.perf-metric-card .pm-hint { font-size: 11px; color: #aaa; margin-top: 6px; }

/* ---- 汇总表格增强 ---- */
.summary-table-wrap {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.summary-table-wrap table {
    width: 100%;
    border-collapse: collapse;
}
.summary-table-wrap th {
    background: var(--primary);
    color: #fff;
    padding: 12px 8px;
    font-size: 12px;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}
.summary-table-wrap td {
    padding: 10px 8px;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid #f0f2f5;
    transition: background 0.15s;
}
.summary-table-wrap tr:hover td { background: #f8f9fa; }
.summary-table-wrap .cell-score { font-weight: 700; font-size: 13px; }
.summary-table-wrap .cell-avg { font-weight: 700; font-size: 14px; color: var(--primary); }
.summary-table-wrap .cell-name { text-align: left !important; font-weight: 600; color: #1a2a4a; font-size: 13px; }
.summary-table-wrap .cell-pos  { text-align: left !important; color: #888; font-size: 11px; }

/* ---- 我的KPI 月度卡片 ---- */
.mykpi-month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.mykpi-month-card {
    background: var(--white);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border: 2px solid transparent;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
}
.mykpi-month-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.mykpi-month-card .mmc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.mykpi-month-card .mmc-month {
    font-size: 13px;
    font-weight: 600;
    color: #1a2a4a;
}
.mykpi-month-card .mmc-score {
    font-size: 28px;
    font-weight: 800;
    color: #1a2a4a;
    text-align: center;
    margin: 8px 0;
}
.mykpi-month-card .mmc-breakdown {
    font-size: 11px;
    color: #888;
    text-align: center;
    margin-bottom: 8px;
}
.mykpi-month-card .mmc-breakdown span { font-weight: 600; color: #555; }
.mykpi-month-card .mmc-bar {
    height: 6px;
    background: #e8eaf0;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
}
.mykpi-month-card .mmc-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}
.mykpi-month-card .mmc-no-data {
    text-align: center;
    color: #aaa;
    font-size: 12px;
    padding: 20px 0;
}

/* ---- 自动保存指示器 ---- */
.auto-save-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #888;
    font-weight: 500;
}
.auto-save-dot::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.3s;
}
.auto-save-dot.saving { color: var(--accent); }
.auto-save-dot.saving::before { background: var(--accent); animation: pulse 0.8s infinite; }
.auto-save-dot.done { color: var(--success); }
.auto-save-dot.done::before { background: var(--success); }
.auto-save-dot.error { color: var(--danger); }
.auto-save-dot.error::before { background: var(--danger); }

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* ---- 工作流进度条增强 ---- */
.workflow-steps {
    display: flex;
    gap: 0;
    background: var(--white);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow-x: auto;
    margin-bottom: 4px;
}
.workflow-step-item {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    min-width: 120px;
}
.workflow-step-item .wsi-num {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
    flex-shrink: 0;
    transition: background 0.3s;
}
.workflow-step-item.done .wsi-num { background: var(--success); }
.workflow-step-item.active .wsi-num { background: var(--secondary); animation: pulse 1.5s infinite; }
.workflow-step-item .wsi-info {
    padding: 0 10px;
    flex: 1;
}
.workflow-step-item .wsi-title { font-size: 13px; font-weight: 600; color: #333; }
.workflow-step-item .wsi-sub { font-size: 11px; color: #888; }
.workflow-step-item.done .wsi-title { color: var(--success); }
.workflow-step-item.active .wsi-title { color: var(--secondary); }
.workflow-step-item:not(.done):not(.active) .wsi-title { color: #aaa; }
.workflow-step-item .wsi-arrow {
    color: #ddd;
    font-size: 18px;
    padding: 0 4px;
    flex-shrink: 0;
}

/* ---- 空状态 ---- */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: #aaa;
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
.empty-state .empty-title { font-size: 16px; font-weight: 600; color: #888; margin-bottom: 6px; }
.empty-state .empty-desc { font-size: 13px; }

/* ---- 页面头部增强 ---- */
.page-header-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 4px;
}
.page-header-v2 h2 {
    font-size: 18px;
    font-weight: 700;
    color: #1a2a4a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-header-v2 .ph-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---- 统一输入框 ---- */
.unified-input {
    padding: 8px 12px;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    transition: border-color 0.2s;
    outline: none;
}
.unified-input:focus { border-color: var(--secondary); }

/* ---- 响应式补充 ---- */
@media (max-width: 1100px) {
    .kpi-fill-row { grid-template-columns: 1fr 120px 100px; }
    .month-progress-grid { grid-template-columns: repeat(4, 1fr); }
    .perf-metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .kpi-config-card { grid-template-columns: 2fr 1fr 0.8fr auto; }
    .kpi-config-card > *:nth-child(4),
    .kpi-config-card > *:nth-child(5) { display: none; }
}
@media (max-width: 768px) {
    .month-progress-grid { grid-template-columns: repeat(3, 1fr); }
    .kpi-fill-row { grid-template-columns: 1fr 90px 80px; }
    .perf-metrics-grid { grid-template-columns: 1fr; }
    .mykpi-month-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-cards-row { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== 本月工作完成情况 ==================== */

.work-report-container {
    max-width: 900px;
    margin: 0 auto;
}

.report-section {
    background: var(--white);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.report-section h3 {
    font-size: 16px;
    color: #333;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-hint {
    font-size: 13px;
    color: #888;
    margin-bottom: 16px;
}

/* 整体完成度 */
.completion-rate-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.completion-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(var(--primary) 0deg, #e0e0e0 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: var(--primary);
    flex-shrink: 0;
    transition: background 0.3s;
}

.completion-slider {
    flex: 1;
}

.completion-slider input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
    background: #e0e0e0;
}

.completion-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
    margin-top: 8px;
}

.self-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.self-rating label {
    font-size: 14px;
    color: #666;
}

.self-rating select {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

/* 工作项列表 */
.work-item-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.work-item-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.work-progress-input {
    width: 80px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
}

.btn-remove-item {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: #ffebee;
    color: #f44336;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-remove-item:hover {
    background: #ffcdd2;
}

.btn-add-item {
    padding: 10px 20px;
    border: 2px dashed #ddd;
    border-radius: 6px;
    background: transparent;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s;
}

.btn-add-item:hover {
    border-color: var(--secondary);
    color: var(--secondary);
    background: #e3f2fd;
}

/* 文本域 */
.report-section textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.2s;
}

.report-section textarea:focus {
    outline: none;
    border-color: var(--secondary);
}

/* 历史记录 */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.history-item:hover {
    background: #e3f2fd;
}

.history-month {
    font-weight: 600;
    color: #333;
}

.history-rate {
    font-weight: bold;
    color: var(--primary);
}

.history-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
}

.history-status.draft {
    background: #fff3e0;
    color: #f57c00;
}

.history-status.submitted {
    background: #e8f5e9;
    color: #4caf50;
}

/* 报告状态 */
.report-status {
    text-align: center;
    padding: 16px;
    font-size: 14px;
}

.report-status.submitted {
    color: #4caf50;
}

.report-status.draft {
    color: #f57c00;
}

/* ==================== 年度目标进度Hover弹窗 ==================== */

.name-with-tooltip {
    position: relative;
    display: inline-block;
}

.name-link {
    cursor: pointer;
    color: #1a2a4a;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.name-link:hover {
    color: var(--secondary);
}

.goal-tooltip {
    display: none;
    position: fixed;
    z-index: 10000;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    padding: 0;
    min-width: 340px;
    max-width: 420px;
    opacity: 0;
    transition: opacity 0.2s;
    border: 1px solid #e2e8f0;
}

.goal-tooltip .tooltip-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
    font-size: 14px;
}

.goal-tooltip .tooltip-content {
    padding: 12px 16px;
    max-height: 400px;
    overflow-y: auto;
}

/* ==================== 视觉优化增强 ==================== */

/* 全局过渡效果增强 */
* {
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f3f4;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: #dadce0;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #bdc1c6;
}

/* 卡片悬浮效果增强 */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* 按钮点击效果 */
.btn-press:active {
    transform: scale(0.97);
}

/* 输入框聚焦效果 */
input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(26,115,232,0.1);
}

/* 等级徽章渐变增强 */
.grade-badge.s {
    background: linear-gradient(135deg, #9c27b0, #ab47bc);
}
.grade-badge.a {
    background: linear-gradient(135deg, #1e88e5, #42a5f5);
}
.grade-badge.b {
    background: linear-gradient(135deg, #43a047, #66bb6a);
}
.grade-badge.c {
    background: linear-gradient(135deg, #fb8c00, #ffa726);
}
.grade-badge.d {
    background: linear-gradient(135deg, #e53935, #ef5350);
}

/* 页面切换动画 */
.page-fade {
    animation: pageEnter 0.25s ease-out;
}
@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 数据表格条纹增强 */
.data-table tbody tr:nth-child(even) {
    background: #fafcff;
}
.data-table tbody tr:nth-child(odd) {
    background: #ffffff;
}
.data-table tbody tr:hover {
    background: #e8f0fe !important;
}

/* 模态框增强 */
.modal-box {
    backdrop-filter: blur(4px);
}

/* 导航菜单图标对齐 */
.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 统计卡片悬停数字跳動 */
.stat-card:hover .stat-value {
    animation: statBounce 0.3s ease;
}
@keyframes statBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* 环形进度条动画 */
.score-ring .fg {
    animation: ringFill 1s ease-out forwards;
}
@keyframes ringFill {
    from { stroke-dashoffset: 188.5; }
    to { stroke-dashoffset: var(--ring-offset, 94.25); }
}

/* KPI项目状态标签 */
.kpi-status-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}
.kpi-status-tag.active {
    background: #e8f5e9;
    color: #2e7d32;
}
.kpi-status-tag.locked {
    background: #fff3e0;
    color: #f57c00;
}
.kpi-status-tag.pending {
    background: #e3f2fd;
    color: #1565c0;
}

/* 表头固定效果 */
.table-fixed-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* 加载状态动画 */
.loading-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 成功/错误提示动画 */
.toast {
    animation: toastIn 0.3s ease-out;
}
@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}