/* recruit-employee-management.css — 员工管理 Apple × X V1 (visual only) — t173 FINAL_TARGETED_POLISH. Scope: every rule is prefixed with the employee page root (body.admin-visual #employeeManagementView), the employee modal root (body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal) or the agent-plan edit dialog root (body.admin-visual .agent-plan-edit-backdrop .agent-plan-edit-modal). No display/visibility/.hidden rules, no @import/url(). Loaded after styles.css. Cascade strategy: normal-priority rules win by specificity (extra root class / id), not by file order. LIMITED EXCEPTION (t173, owner-authorised): the final section "LIMITED important-priority overrides" holds the ONLY important-priority declarations; each one answers one located legacy important-priority rule in styles.css (page eyebrow / 新增员工 button / table-head gradient / row hover) — see IMPORTANT_USAGE_t173.md. Everything else that styles.css marks important-priority (td colours, panel/stat borders & shadows, avatar gradient, display:none on the legacy nth-child(2)/(6) modal columns) is intentionally NOT touched — see KEEP_CHANGE.md DEFER items. */ /* ================= PAGE: #employeeManagementView ================= */ /* ---- table: undo recruitment-list leaks (table-layout:fixed, th/td overflow:hidden, nth-child widths 42/90/116px) ---- */ body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table { table-layout: auto; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table th, body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td { width: auto; min-width: 0; overflow: visible; text-overflow: clip; padding: 10px 14px; vertical-align: middle; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table th { white-space: nowrap; font-size: 12px; text-align: left; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td { white-space: nowrap; font-size: 13px; line-height: 1.45; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table th:first-child, body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td:first-child { min-width: 168px; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td:nth-child(2) { min-width: 128px; overflow-wrap: anywhere; white-space: normal; max-width: 220px; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td .user-name-cell { max-width: 240px; align-items: center; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td .user-name-cell > span:last-child { min-width: 0; overflow-wrap: anywhere; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td .user-name-cell strong { white-space: normal; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; line-height: 1.35; color: #111111; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td .user-name-cell small { white-space: nowrap; font-size: 12px; color: #6E6E73; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td:has(> code:not(.employee-page-link)) { min-width: 128px; max-width: 220px; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td code { white-space: normal; overflow-wrap: anywhere; vertical-align: middle; font-size: 12px; color: #3A3A3C; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td code.employee-page-link { max-width: 300px; color: #6E6E73; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td.employee-page-actions { min-width: 150px; width: auto; gap: 8px; flex-wrap: wrap; align-items: center; height: 100%; border-bottom-width: 0; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td { border-bottom-width: 0; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table tbody tr { box-shadow: inset 0 -1px 0 #E5E5E5; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td.employee-page-actions button { min-height: 32px; border-radius: 10px; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-wecom-status { border-radius: 999px; padding: 3px 10px; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table th:last-child { min-width: 150px; width: auto; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table th:nth-child(7), body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td:nth-child(7) { width: auto; min-width: 72px; text-align: right; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table th:nth-child(8), body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table td:nth-child(8) { width: auto; min-width: 150px; } /* ---- legacy blue → neutral (non-important-marked declarations only) ---- */ body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table .employee-page-copy { background: #FFFFFF; border: 1px solid #D2D2D7; color: #111111; border-radius: 10px; font-weight: 600; box-shadow: none; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table .employee-page-copy:hover { background: #F5F5F7; border-color: #6E6E73; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-page-table .employee-page-enter { color: #111111; border-color: #D2D2D7; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-permission-notes article strong { color: #111111; font-weight: 700; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-permission-notes article p { color: #6E6E73; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-stats article small { letter-spacing: 0; } body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #employeeManagementView .employee-management-panel .workbench-panel-heading p { font-size: 13px; } /* ---- focus / hover / disabled (explicit text colour: global button{color:#fff} must never land on white) ---- */ body.admin-visual #employeeManagementView button { letter-spacing: 0; } body.admin-visual #employeeManagementView :is(button, a, input, select, textarea):focus-visible { outline: 2px solid #111111; outline-offset: 2px; } body.admin-visual #employeeManagementView button:disabled { opacity: .45; cursor: not-allowed; } /* ---- page: narrow screens keep the table inner-scrollable, never widen the document ---- */ @media (max-width: 768px) { body.admin-visual #employeeManagementView .employee-management-table-scroll { max-width: 100%; -webkit-overflow-scrolling: touch; } body.admin-visual #employeeManagementView .employee-management-page-table td.employee-page-actions { min-width: 132px; } } /* ---- stats: six cards, responsive (overrides styles.css four-column grid by specificity) ---- */ body.admin-visual #employeeManagementView .employee-management-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 1100px) { body.admin-visual #employeeManagementView .employee-management-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { body.admin-visual #employeeManagementView .employee-management-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- toolbar: status tabs + search ---- */ body.admin-visual #employeeManagementView .employee-page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; } body.admin-visual #employeeManagementView .employee-page-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #E5E5E5; border-radius: 12px; background: #F5F5F7; } body.admin-visual #employeeManagementView .employee-page-tabs button { border: 0; background: transparent; color: #6E6E73; font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 9px; cursor: pointer; line-height: 1.2; } body.admin-visual #employeeManagementView .employee-page-tabs button:hover { color: #111111; } body.admin-visual #employeeManagementView .employee-page-tabs button.is-active { background: #FFFFFF; color: #111111; box-shadow: 0 1px 3px rgba(17,17,17,.12); } body.admin-visual #employeeManagementView .employee-page-search { flex: 0 1 280px; min-width: 200px; height: 36px; padding: 0 14px; border: 1px solid #D2D2D7; border-radius: 10px; background: #FFFFFF; color: #111111; font-size: 13px; } body.admin-visual #employeeManagementView .employee-page-search::placeholder { color: #8E8E93; } @media (max-width: 640px) { body.admin-visual #employeeManagementView .employee-page-toolbar { align-items: stretch; } body.admin-visual #employeeManagementView .employee-page-search { flex: 1 1 100%; } } /* ---- employment status badge (read-only; independent of enabled/disabled) ---- */ body.admin-visual #employeeManagementView .employee-status-badge { display: inline-block; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 600; line-height: 1.4; } body.admin-visual #employeeManagementView .employee-status-badge.is-active { background: #E8F5E9; color: #2E7D32; } body.admin-visual #employeeManagementView .employee-status-badge.is-inactive { background: #F5F5F7; color: #6E6E73; } /* ================= MODAL: employee management ================= */ body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal { border-color: #E5E5E5; border-radius: 18px; box-shadow: 0 24px 64px rgba(17,17,17,.2); color: #111111; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-management-head { background: #FFFFFF; border-bottom: 1px solid #E5E5E5; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-management-head h2 { color: #111111; font-weight: 700; letter-spacing: -0.01em; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-management-subtitle { color: #6E6E73; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .detail-close { color: #6E6E73; background: #FFFFFF; border: 1px solid #E5E5E5; box-shadow: none; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .detail-close:hover { background: #F5F5F7; color: #111111; border-color: #D2D2D7; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-management-body { background: #F5F5F7; overflow-y: auto; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-management-footer { background: #FFFFFF; border-top: 1px solid #E5E5E5; } /* ---- button tokens: styles.css (global-ui-button-token-phase6-b1) paints every button.primary/.secondary from these custom properties through an id-weight :is() rule; re-pointing them inside the dialog roots is the specificity-safe way ---- */ body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal, body.admin-visual .agent-plan-edit-backdrop .agent-plan-edit-modal { --ui-button-primary-bg: #111111; --ui-button-primary-bg-hover: #3A3A3C; --ui-button-primary-border: #111111; --ui-button-secondary-border: #D2D2D7; --ui-button-secondary-border-hover: #6E6E73; --ui-button-secondary-text: #111111; --ui-button-secondary-bg-hover: #F5F5F7; --ui-input-border: #D2D2D7; --ui-input-border-hover: #6E6E73; --ui-input-border-focus: #111111; --ui-input-text: #111111; --ui-input-muted: #6E6E73; --ui-input-radius: 10px; --ui-input-shadow-focus: none; } /* ---- buttons (neutral secondary / near-black primary / red danger) ---- */ body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal button { letter-spacing: 0; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal :is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid #111111; outline-offset: 2px; box-shadow: none; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal button:disabled { opacity: .45; cursor: not-allowed; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal :is(.secondary, .employee-management-footer button, .user-link-copy, .user-toggle, .user-reset, .agent-plan-edit, .name-copy, .agent-more-menu > summary) { background: #FFFFFF; border: 1px solid #D2D2D7; color: #111111; box-shadow: none; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal :is(.secondary, .employee-management-footer button, .user-link-copy, .user-toggle, .user-reset, .agent-plan-edit, .name-copy, .agent-more-menu > summary):hover:not(:disabled) { background: #F5F5F7; border-color: #6E6E73; color: #111111; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal :is(.primary, .user-wecom-save, .account-phone-save) { background: #111111; border: 1px solid #111111; color: #FFFFFF; box-shadow: none; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal :is(.primary, .user-wecom-save, .account-phone-save):hover:not(:disabled) { background: #3A3A3C; border-color: #3A3A3C; color: #FFFFFF; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal :is(.user-delete,) { background: #FFFFFF; border: 1px solid #FECACA; color: #B91C1C; box-shadow: none; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-delete:hover:not(:disabled) { background: #FEF2F2; border-color: #B91C1C; color: #991B1B; } /* ---- admin entry card + reset card (blue gradient → neutral) ---- */ body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-admin-entry-card { background: #FFFFFF; border: 1px solid #E5E5E5; box-shadow: none; border-radius: 14px; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-admin-entry-title { color: #111111; font-weight: 700; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-admin-label { color: #6E6E73; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-admin-contact-link { background: #F5F5F7; border: 1px solid #E5E5E5; color: #3A3A3C; border-radius: 8px; white-space: normal; overflow-wrap: anywhere; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-admin-entry-actions { flex-wrap: wrap; gap: 8px; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-admin-entry-actions > button { margin: 0; } /* ---- accordions: children of the flex-column body must not shrink (collapsed headers were clipped to ~37px by overflow:hidden) ---- */ body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-management-body > * { flex-shrink: 0; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal :is(.employee-management-accordion, .employee-management-list-accordion) { border: 1px solid #E5E5E5; border-radius: 14px; box-shadow: none; background: #FFFFFF; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal :is(.employee-management-accordion-toggle, .employee-management-list-toggle) { background: #FFFFFF; color: #111111; font-weight: 700; min-height: 46px; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal :is(.employee-management-accordion-toggle, .employee-management-list-toggle):hover { background: #F5F5F7; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-management-accordion-arrow { color: #6E6E73; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-management-list-content { border-top: 1px solid #E5E5E5; background: #FFFFFF; } /* ---- forms ---- */ body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-create-form { background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 12px; gap: 12px 14px; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-create-form label { color: #3A3A3C; font-weight: 600; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal :is(input, select, textarea) { background: #FFFFFF; color: #111111; border: 1px solid #D2D2D7; border-radius: 10px; box-shadow: none; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal :is(input, select, textarea):hover:not(:disabled) { border-color: #6E6E73; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal :is(input, textarea)::placeholder { color: #6E6E73; opacity: 1; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal :is(input, select, textarea):focus { border-color: #111111; box-shadow: none; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-reset-card { background: #FFFFFF; border: 1px solid #E5E5E5; box-shadow: none; } /* ---- list tables ---- */ body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal table.user-management-table { table-layout: auto; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-management-table th, body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-management-table td { overflow: visible; text-overflow: clip; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-table-wrap { border: 1px solid #E5E5E5; border-radius: 12px; background: #FFFFFF; box-shadow: none; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-management-table thead th { background: #F5F5F7; color: #6E6E73; font-weight: 600; box-shadow: 0 1px 0 #E5E5E5; border-bottom-color: #E5E5E5; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-management-table tbody td { color: #111111; border-bottom-color: #E5E5E5; vertical-align: middle; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-management-table tbody tr:hover td { background: #F5F5F7; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-management-table td:has(> code) { min-width: 96px; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-management-table td code { white-space: nowrap; overflow-wrap: normal; word-break: normal; vertical-align: middle; color: #3A3A3C; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-management-table .user-display-name { color: #111111; font-weight: 600; white-space: normal; overflow-wrap: anywhere; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-management-table .user-account-name { color: #6E6E73; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-management-table .user-name-cell { max-width: none; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-management-table .user-account-name { white-space: nowrap; overflow-wrap: normal; word-break: normal; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-management-table td.user-actions { flex-wrap: nowrap; gap: 6px; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-empty { color: #6E6E73; } /* ---- agent list: its own attribute-scoped rules in styles.css (0,6,1) are matched one class higher ---- */ body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal [data-user-management-list-accordion="agent"] .agent-actions-cell > .agent-link-copy { background: #111111; border: 1px solid #111111; color: #FFFFFF; box-shadow: none; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal [data-user-management-list-accordion="agent"] .agent-actions-cell > .agent-link-copy:hover:not(:disabled) { background: #3A3A3C; border-color: #3A3A3C; color: #FFFFFF; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal [data-user-management-list-accordion="agent"] .agent-actions-cell > .agent-plan-edit { background: #FFFFFF; border: 1px solid #D2D2D7; color: #111111; box-shadow: none; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal [data-user-management-list-accordion="agent"] .agent-actions-cell > .agent-plan-edit:hover:not(:disabled) { background: #F5F5F7; border-color: #6E6E73; color: #111111; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal [data-user-management-list-accordion="agent"] .agent-more-menu > summary { background: #FFFFFF; border: 1px solid #D2D2D7; color: #111111; box-shadow: none; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal [data-user-management-list-accordion="agent"] .agent-more-menu > summary:hover { background: #F5F5F7; border-color: #6E6E73; color: #111111; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal [data-user-management-list-accordion="agent"] .agent-wecom-save { background: #111111; border-color: #111111; color: #FFFFFF; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal [data-user-management-list-accordion="agent"] .agent-wecom-save:hover:not(:disabled) { background: #3A3A3C; border-color: #3A3A3C; color: #FFFFFF; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal [data-user-management-list-accordion="agent"] .user-management-table tbody tr:hover td { background: #F5F5F7; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-management-list-accordion.is-open .employee-management-list-toggle { background: #F5F5F7; } /* ---- avatar / tags (semantic green kept; disabled/inactive → neutral grey with AA contrast) ---- */ body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-inline-avatar { background: #F5F5F7; color: #3A3A3C; border: 1px solid #E5E5E5; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-role-tag { background: #F5F5F7; color: #3A3A3C; border: 1px solid #E5E5E5; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-enabled.is-disabled { background: #F5F5F7; color: #6E6E73; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-employee-status-select:focus-visible { outline: 2px solid #111111; outline-offset: 2px; } /* ---- agent more-menu (details) : colours only, open/closed state untouched ---- */ body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .agent-more-menu-panel { border: 1px solid #E5E5E5; border-radius: 12px; box-shadow: 0 12px 32px rgba(17,17,17,.12); background: #FFFFFF; } /* ---- account-phone editor ---- */ body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .account-phone-editor { gap: 8px; flex-wrap: wrap; align-items: center; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .account-phone-status { color: #6E6E73; } /* ---- narrow screens ---- */ @media (max-width: 768px) { body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .employee-admin-entry-actions { flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; } body.admin-visual .employee-management-backdrop .user-management-modal.employee-management-modal.employee-management-modal .user-management-table td.user-actions { max-width: none; } } /* ================= MODAL: agent plan edit dialog ================= */ body.admin-visual .agent-plan-edit-backdrop .agent-plan-edit-modal { border-color: #E5E5E5; border-radius: 18px; box-shadow: 0 24px 64px rgba(17,17,17,.2); } body.admin-visual .agent-plan-edit-backdrop .agent-plan-edit-modal .detail-head { background: #FFFFFF; border-bottom: 1px solid #E5E5E5; } body.admin-visual .agent-plan-edit-backdrop .agent-plan-edit-modal .detail-head h2 { color: #111111; font-weight: 700; } body.admin-visual .agent-plan-edit-backdrop .agent-plan-edit-modal [data-agent-plan-save] { background: #111111; border: 1px solid #111111; color: #FFFFFF; box-shadow: none; } body.admin-visual .agent-plan-edit-backdrop .agent-plan-edit-modal [data-agent-plan-save]:hover:not(:disabled) { background: #3A3A3C; border-color: #3A3A3C; } body.admin-visual .agent-plan-edit-backdrop .agent-plan-edit-modal .detail-cancel { background: #FFFFFF; border: 1px solid #D2D2D7; color: #111111; } body.admin-visual .agent-plan-edit-backdrop .agent-plan-edit-modal :is(button, select):focus-visible { outline: 2px solid #111111; outline-offset: 2px; box-shadow: none; } body.admin-visual .agent-plan-edit-backdrop .agent-plan-edit-modal [name="commissionPlanId"] { border-color: #D2D2D7; color: #111111; } /* ================= LIMITED important-priority overrides (t173) ================= Each rule beats exactly one legacy important-priority rule of styles.css (spec: an important declaration can only be beaten by another important declaration of >= specificity; normal-priority + repeated-id prefixes were tested and cannot win — NORMAL_PRIORITY_PROOF_t173.json). Only colour / gradient / shadow properties of decorative blue; no display/visibility/size/position; business status colours untouched. */ /* I1 eyebrow "组织与账号": styles.css L42735 (#2563eb, important) */ body.admin-visual #employeeManagementView .admin-placeholder-hero > span:first-child { color: #6E6E73 !important; } /* I2 新增员工 primary button: styles.css L42811 (bg/border #2563eb + blue shadow, important) and L42822 (:hover #1d4ed8, important) */ body.admin-visual #employeeManagementView #placeholderManageUsersBtn.workbench-primary-action { background-color: #111111 !important; border-color: #111111 !important; box-shadow: none !important; } body.admin-visual #employeeManagementView #placeholderManageUsersBtn.workbench-primary-action:hover { background-color: #3A3A3C !important; border-color: #3A3A3C !important; } /* I3 table head slate/blue gradient + colour + bottom border: styles.css L42833 (border-bottom-color #dbe4f0 L42834, linear-gradient(#f8fafc,#f1f5f9) L42835, #334155 L42836, all important) */ body.admin-visual #employeeManagementView .employee-management-page-table thead th { background-image: none !important; background-color: #F5F5F7 !important; color: #6E6E73 !important; border-bottom-color: #E5E5E5 !important; } /* I4 row hover blue tint: styles.css L42846 (#f4f8ff, important) */ body.admin-visual #employeeManagementView .employee-management-table-scroll .employee-management-page-table tbody tr:hover { background-color: #F5F5F7 !important; }