/* recruit-attendance-payroll.css — 考勤薪资 Apple × X V1 (visual only) — t176 CANDIDATE (not deployed).
   Scope: every rule is prefixed with the page root (body.admin-visual #internalPayrollView, written as ...#internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) so the staff self-service view is excluded at zero extra specificity), the drawer root
   (body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *)) or the employment-date confirm modal root
   (body.admin-visual .internal-payroll-employment-backdrop .internal-payroll-employment-modal).
   No display/visibility/.hidden rules, no @import/url(), no priority-escalation flags. Loaded after recruit-employee-management.css.
   Cascade strategy: ID-level specificity (#internalPayrollView / #internalPayrollDrawerRoot), not file order.
   Palette: #111111 text, #6E6E73 secondary, #E5E5E5 border, #D2D2D7 secondary border, #F5F5F7 page, #FFFFFF card.
   Kept on purpose: teal/green (income, 在职, 出勤), amber (人工结算/更正中/法定休息), red (请假, error).
   The employee self-view (#internalPayrollEmployee) is NOT restyled. */
/* ---- page shell ---- */
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) { background: #F5F5F7; color: #111111; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-hero h1 { color: #111111; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-hero p, body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-card-header p { color: #6E6E73; }
/* ---- header actions: month input + buttons (no wrapped labels, one button language) ---- */
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-month-actions { flex-wrap: wrap; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-month-actions :is(input, button) { min-height: 38px; border: 1px solid #D2D2D7; border-radius: 10px; background: #FFFFFF; color: #111111; padding: 7px 14px; font-weight: 600; white-space: nowrap; box-shadow: none; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-month-actions input { width: 132px; font-weight: 500; font-variant-numeric: tabular-nums; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-month-actions button:hover { background: #F5F5F7; border-color: #6E6E73; }
/* primary action: neutral black instead of leaked legacy blue (styles.css:45036 :is(... #addApplicantBtn ... button.primary)) */
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) :is(#internalPayrollAdminActions, #internalPayrollWorkbench, #internalPayrollRoster) button.primary { background: #111111; border: 1px solid #111111; color: #FFFFFF; border-radius: 10px; font-weight: 600; box-shadow: none; white-space: nowrap; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) :is(#internalPayrollAdminActions, #internalPayrollWorkbench, #internalPayrollRoster) button.primary:hover { background: #3A3A3C; border-color: #3A3A3C; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) :is(button, input, select, textarea):focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) button:disabled { cursor: not-allowed; }
/* ---- tabs ---- */
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-tabs { border-bottom: 1px solid #E5E5E5; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-tabs button { color: #6E6E73; font-weight: 600; white-space: nowrap; min-height: 0; border-radius: 0; background: transparent; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-tabs button:hover { color: #111111; background: transparent; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-tabs button.is-active { color: #111111; border-bottom: 2px solid #111111; }
/* ---- toast notice (colours only; position untouched) ---- */
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-notice { background: #FFFFFF; color: #111111; border: 1px solid #E5E5E5; border-left: 4px solid #176b5c; border-radius: 12px; box-shadow: 0 12px 32px rgba(17,17,17,.14); }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-notice[data-type=error] { background: #FFFFFF; color: #a32626; border-color: #E5E5E5; border-left-color: #D92D20; }
/* ---- cards / table wrap: inner horizontal scroll, scroll-shadow hint (gradients only) ---- */
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table-wrap, body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-card { background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 14px; box-shadow: none; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table-wrap { max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background: linear-gradient(to right, #FFFFFF 24px, rgba(255,255,255,0)) left center / 40px 100% no-repeat local, linear-gradient(to left, #FFFFFF 24px, rgba(255,255,255,0)) right center / 40px 100% no-repeat local, linear-gradient(to right, rgba(17,17,17,.10), rgba(17,17,17,0)) left center / 12px 100% no-repeat scroll, linear-gradient(to left, rgba(17,17,17,.10), rgba(17,17,17,0)) right center / 12px 100% no-repeat scroll, #FFFFFF; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-card h2 { color: #111111; font-weight: 700; letter-spacing: -0.01em; }
/* ---- workbench table: undo recruit-list leaks (styles.css:1555 th/td:nth-child(7) white-space:normal + word-break; :1542 overflow:hidden; :1546-1556 nth-child widths/centering) ---- */
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table { min-width: 1180px; table-layout: auto; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table :is(th, td) { width: auto; min-width: 0; overflow: visible; white-space: nowrap; word-break: normal; overflow-wrap: normal; text-align: left; padding: 12px; border-bottom: 1px solid #E5E5E5; color: #111111; font-size: 13px; vertical-align: middle; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table th { background: #F5F5F7; color: #6E6E73; font-size: 12px; font-weight: 600; border-bottom: 1px solid #D2D2D7; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table :is(th, td):first-child { white-space: normal; overflow-wrap: anywhere; min-width: 168px; max-width: 280px; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table :is(th, td):nth-child(2) { min-width: 112px; font-variant-numeric: tabular-nums; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table :is(th, td):nth-child(5) { min-width: 84px; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table :is(th, td):is(:nth-child(6), :nth-child(7), :nth-child(8)) { min-width: 116px; text-align: right; font-variant-numeric: tabular-nums; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table :is(th, td):nth-child(9) { min-width: 148px; text-align: right; font-variant-numeric: tabular-nums; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table :is(th, td):nth-child(10) { min-width: 116px; text-align: left; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table tbody td strong { font-weight: 600; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table tbody tr:hover { background: #F5F5F7; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table tbody tr:focus-visible { outline: 2px solid #111111; outline-offset: -2px; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table td small { color: #9A6700; font-size: 11px; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table tfoot td { background: #F5F5F7; border-top: 1px solid #D2D2D7; border-bottom: 0; color: #111111; font-weight: 600; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table tfoot td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; min-width: 148px; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-table :is(td[colspan="10"]) { white-space: normal; text-align: center; color: #6E6E73; }
/* ---- roster tab: full-width table card so the 操作 column stays reachable; side-by-side only on very wide screens ---- */
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-two-column { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1680px) {
  body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-two-column { grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr); }
}
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-member-table-wrap { border: 1px solid #E5E5E5; border-radius: 12px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-config-table :is(th, td) { width: auto; overflow: visible; white-space: nowrap; word-break: normal; border-bottom: 1px solid #E5E5E5; color: #111111; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-config-table th { background: #F5F5F7; color: #6E6E73; font-weight: 600; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-config-table :is(th, td):first-child { white-space: normal; overflow-wrap: anywhere; min-width: 168px; max-width: 280px; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-config-table tbody td:first-child strong { font-weight: 600; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-roster-group > td { background: #F5F5F7; color: #6E6E73; border-bottom: 1px solid #E5E5E5; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-roster-group.is-toggleable > td:hover { background: #EDEDF0; color: #111111; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-roster-group.is-toggleable:focus-visible { outline: 2px solid #111111; outline-offset: -2px; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-roster-caret { color: #6E6E73; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-roster-count { color: #6E6E73; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-row-actions { flex-wrap: nowrap; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-row-actions button, body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-card-header button, body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-list-row > button { min-height: 34px; border: 1px solid #D2D2D7; border-radius: 10px; background: #FFFFFF; color: #111111; font-weight: 600; padding: 6px 12px; white-space: nowrap; box-shadow: none; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-row-actions button:hover, body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-card-header button:not(.primary):hover, body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-list-row > button:hover { background: #F5F5F7; border-color: #6E6E73; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-list-row { border-bottom: 1px solid #E5E5E5; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-holiday-list { border-top: 1px solid #E5E5E5; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-list-row small, body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-list-meta, body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-hint { color: #6E6E73; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-list-row > div { min-width: 0; overflow-wrap: anywhere; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-inline-form { border: 1px solid #E5E5E5; background: #F5F5F7; border-radius: 12px; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-form :is(input, select, textarea) { border: 1px solid #D2D2D7; border-radius: 10px; background: #FFFFFF; color: #111111; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-form :is(input, select, textarea):focus { outline: 0; border-color: #111111; box-shadow: 0 0 0 3px rgba(17,17,17,.08); }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-form label { color: #6E6E73; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-empty-state.compact { border: 1px dashed #D2D2D7; background: #F5F5F7; border-radius: 12px; }
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-empty-state.compact p { color: #6E6E73; }
/* ---- narrow screens ---- */
@media (max-width: 900px) {
  body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-month-actions input { width: 100%; }
  body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-month-actions :is(input, button) { min-height: 44px; }
}
@media (max-width: 560px) {
  body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-hero h1 { font-size: 24px; }
  body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-tabs { overflow-x: auto; }
  body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-row-actions button, body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-card-header button, body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) .internal-payroll-list-row > button { min-height: 40px; }
}

/* ================= DRAWER: #internalPayrollDrawerRoot (body-level sibling of the page root) ================= */
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-drawer-mask { background: rgba(17,17,17,.4); }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-drawer { background: #FFFFFF; color: #111111; border-left: 1px solid #E5E5E5; box-shadow: -16px 0 48px rgba(17,17,17,.16); }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-drawer > header { border-bottom: 1px solid #E5E5E5; background: #FFFFFF; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-drawer header small { color: #6E6E73; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-drawer header h2 { color: #111111; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
/* × close: global button{color:#fff;min-height:44px} made it white-on-white (styles.css:141) */
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-drawer > header button { flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 1px solid #E5E5E5; border-radius: 10px; background: #FFFFFF; color: #6E6E73; font-size: 24px; line-height: 1; box-shadow: none; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-drawer > header button:hover { background: #F5F5F7; color: #111111; border-color: #D2D2D7; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) :is(button, input, select, textarea, summary):focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-drawer-body h3 { color: #111111; font-weight: 700; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-formula { background: #F5F5F7; border: 1px solid #E5E5E5; border-radius: 12px; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-formula p { color: #111111; overflow-wrap: anywhere; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-formula span { color: #6E6E73; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-day { border: 1px solid #E5E5E5; border-radius: 10px; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-day:disabled { cursor: default; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-day:not(:disabled):hover { border-color: #6E6E73; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-form :is(input, select, textarea) { min-height: 38px; border: 1px solid #D2D2D7; border-radius: 10px; background: #FFFFFF; color: #111111; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-form :is(input, select, textarea):focus { outline: 0; border-color: #111111; box-shadow: 0 0 0 3px rgba(17,17,17,.08); }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-form label { color: #6E6E73; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) :is(.internal-payroll-form, .internal-payroll-published) button:not(.primary) { min-height: 40px; border: 1px solid #D2D2D7; border-radius: 10px; background: #FFFFFF; color: #111111; font-weight: 600; box-shadow: none; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) :is(.internal-payroll-form, .internal-payroll-published) button:not(.primary):hover { background: #F5F5F7; border-color: #6E6E73; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) button.primary { background: #111111; border: 1px solid #111111; color: #FFFFFF; border-radius: 10px; font-weight: 600; box-shadow: none; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) button.primary:hover { background: #3A3A3C; border-color: #3A3A3C; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-manual { border: 1px solid #efd7a3; background: #fffaf0; border-radius: 12px; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-published { border: 1px solid #E5E5E5; background: #F5F5F7; border-radius: 12px; flex-wrap: wrap; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-published span { color: #6E6E73; overflow-wrap: anywhere; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-breakdown { border-top: 1px solid #E5E5E5; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-breakdown-row { border-bottom: 1px solid #E5E5E5; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-breakdown-row span { color: #6E6E73; min-width: 0; overflow-wrap: anywhere; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-breakdown-row strong { color: #111111; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-breakdown-row small { color: #6E6E73; overflow-wrap: anywhere; }
body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-empty { color: #6E6E73; }
@media (max-width: 560px) {
  body.admin-visual #internalPayrollDrawerRoot:where(#internalPayrollView:has(#internalPayrollEmployee.hidden) *) .internal-payroll-drawer-body :is(input, select, textarea) { font-size: 16px; }
}

/* ================= MODAL: employment-date confirm (legacy blue focus ring → neutral) ================= */
body.admin-visual .internal-payroll-employment-backdrop .internal-payroll-employment-modal.internal-payroll-employment-modal .internal-payroll-employment-reason { color: #111111; }
body.admin-visual .internal-payroll-employment-backdrop .internal-payroll-employment-modal.internal-payroll-employment-modal .internal-payroll-employment-reason textarea { border: 1px solid #D2D2D7; border-radius: 10px; color: #111111; }
body.admin-visual .internal-payroll-employment-backdrop .internal-payroll-employment-modal.internal-payroll-employment-modal .internal-payroll-employment-reason textarea:focus { border-color: #111111; box-shadow: 0 0 0 3px rgba(17,17,17,.08); }
body.admin-visual .internal-payroll-employment-backdrop .internal-payroll-employment-modal.internal-payroll-employment-modal .internal-payroll-employment-reason textarea.field-invalid { border-color: #D92D20; box-shadow: 0 0 0 3px rgba(217,45,32,.12); }

/* ---- t182 RECRUIT_APPLE_X_VISUAL_OMISSIONS_PATCH_V1 · payroll month picker popup (visual only) ----
   admin.js showFilterMonthPicker() appends div.month-picker-popup directly to <body>, so it cannot be scoped under #internalPayrollView.
   Gate: payroll page visible AND the staff self-service block hidden (staff "我的工资" never opens this popup and stays untouched);
   the recruitment-page popup is restyled separately in recruit-registration-controls.css (#recruitmentView gate) and is not affected.
   Replaces legacy blue (styles.css 41210-41290: #2563eb confirm, #3b82f6 focus border + 3px glow, #93c5fd hover) by the neutral palette.
   Cancel button stays display:none (base rule); popup position / JS behaviour untouched. No priority-escalation flags: ID-level specificity only. */
body.admin-visual:has(#internalPayrollView:not(.hidden) #internalPayrollEmployee.hidden) > .month-picker-popup { box-sizing: border-box; width: 210px; padding: 10px; border: 1px solid #E5E5E5; border-radius: 12px; background: #FFFFFF; box-shadow: 0 8px 24px rgb(0 0 0 / 8%); }
body.admin-visual:has(#internalPayrollView:not(.hidden) #internalPayrollEmployee.hidden) > .month-picker-popup .month-picker-title { margin: 0 0 8px; color: #111111; font-size: 13px; font-weight: 600; line-height: 1.35; }
body.admin-visual:has(#internalPayrollView:not(.hidden) #internalPayrollEmployee.hidden) > .month-picker-popup .month-picker-controls { gap: 8px; }
body.admin-visual:has(#internalPayrollView:not(.hidden) #internalPayrollEmployee.hidden) > .month-picker-popup .month-picker-controls select { box-sizing: border-box; height: 32px; min-width: 0; padding: 0 8px; border: 1px solid #E5E5E5; border-radius: 8px; background: #FFFFFF; color: #111111; font-size: 13px; font-weight: 500; box-shadow: none; }
body.admin-visual:has(#internalPayrollView:not(.hidden) #internalPayrollEmployee.hidden) > .month-picker-popup .month-picker-controls select:hover { border-color: #D2D2D7; background: #F5F5F7; }
body.admin-visual:has(#internalPayrollView:not(.hidden) #internalPayrollEmployee.hidden) > .month-picker-popup .month-picker-controls select:focus { border-color: #D2D2D7; box-shadow: none; outline: 0; }
body.admin-visual:has(#internalPayrollView:not(.hidden) #internalPayrollEmployee.hidden) > .month-picker-popup .month-picker-controls select:focus-visible { outline: 2px solid #111111; outline-offset: 1px; }
body.admin-visual:has(#internalPayrollView:not(.hidden) #internalPayrollEmployee.hidden) > .month-picker-popup .month-picker-actions { margin-top: 8px; }
body.admin-visual:has(#internalPayrollView:not(.hidden) #internalPayrollEmployee.hidden) > .month-picker-popup .month-picker-actions [data-month-confirm] { box-sizing: border-box; flex: 1 1 auto; width: 100%; height: 32px; min-height: 32px; border-color: #111111; border-radius: 8px; background: #111111; color: #FFFFFF; font-size: 13px; font-weight: 600; }
body.admin-visual:has(#internalPayrollView:not(.hidden) #internalPayrollEmployee.hidden) > .month-picker-popup .month-picker-actions [data-month-confirm]:hover { border-color: #3C3C43; background: #3C3C43; }
body.admin-visual:has(#internalPayrollView:not(.hidden) #internalPayrollEmployee.hidden) > .month-picker-popup .month-picker-actions [data-month-confirm]:active { border-color: #111111; background: #111111; }
body.admin-visual:has(#internalPayrollView:not(.hidden) #internalPayrollEmployee.hidden) > .month-picker-popup .month-picker-actions [data-month-confirm]:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
/* month input focus ring: 2px, 1px gap (was 2px + 2px gap on a 38px field = visually the thickest ring on the page) */
body.admin-visual #internalPayrollView:where(:has(#internalPayrollEmployee.hidden)) #internalPayrollMonth:focus-visible { outline: 2px solid #111111; outline-offset: 1px; }