/* Employee directory shares the Approval Center's visual language. */
html body[data-view="employees"] #view { padding:20px 18px !important; background:var(--approval-ref-canvas) !important; color:var(--approval-ref-ink); font-family:Inter,"Segoe UI",sans-serif !important; }
html body[data-view="employees"] #view .employee-directory-header { display:flex !important; align-items:center; justify-content:space-between; gap:20px; margin:0 0 16px !important; padding:20px 24px !important; border:1px solid var(--approval-ref-line) !important; border-top:3px solid var(--approval-ref-blue-line) !important; border-radius:14px !important; background:linear-gradient(145deg,#fff,var(--approval-ref-surface-soft)) !important; box-shadow:var(--approval-ref-shadow) !important; }
html body[data-view="employees"] #view .employee-directory-heading h2 { margin:0 0 6px !important; color:var(--approval-ref-ink) !important; font-size:21px !important; font-weight:700 !important; letter-spacing:-.4px; }
html body[data-view="employees"] #view .employee-directory-heading p { margin:0 !important; color:var(--approval-ref-muted) !important; font-size:12px !important; font-weight:450 !important; }
html body[data-view="employees"] #view :is(.button,.ghost-button) { display:inline-flex !important; align-items:center; justify-content:center; width:auto !important; min-width:0 !important; min-height:32px !important; padding:6px 11px !important; border:1px solid var(--approval-ref-blue-line) !important; border-radius:7px !important; background:var(--approval-ref-blue-soft) !important; color:var(--approval-ref-blue) !important; font:650 11px Inter,"Segoe UI",sans-serif !important; box-shadow:none !important; white-space:nowrap !important; }
html body[data-view="employees"] #view .employee-directory-header .button { padding:9px 17px !important; min-height:36px !important; border-radius:999px !important; font-size:12px !important; }
html body[data-view="employees"] #view .danger-button { border-color:var(--approval-ref-red-line) !important; background:var(--approval-ref-red-soft) !important; color:var(--approval-ref-red) !important; }
html body[data-view="employees"] #view button:hover { filter:brightness(.97); }
html body[data-view="employees"] #view button:focus-visible { outline:3px solid var(--approval-ref-blue-line); outline-offset:2px; }
html body[data-view="employees"] #view .global-data-export-tools { padding:0 0 10px !important; gap:8px !important; }
html body[data-view="employees"] #view .employee-table-wrap { height:auto !important; min-height:0 !important; max-height:none !important; overflow-x:auto !important; border:1px solid var(--approval-ref-line) !important; border-radius:14px !important; background:#fff !important; box-shadow:var(--approval-ref-shadow) !important; }
html body[data-view="employees"] #view .employee-table { width:100% !important; min-width:980px !important; table-layout:auto !important; border-collapse:collapse !important; }
html body[data-view="employees"] #view .employee-table :is(th,td) { width:auto !important; min-width:0 !important; max-width:none !important; min-height:0 !important; padding:6px 14px !important; border:0 !important; border-bottom:1px solid var(--approval-ref-line-soft) !important; color:var(--approval-ref-ink) !important; font-size:12px !important; line-height:1.25 !important; text-align:left !important; vertical-align:middle !important; box-sizing:border-box !important; }
html body[data-view="employees"] #view .employee-table :is(thead,tbody,tr) { height:auto !important; min-height:0 !important; }
html body[data-view="employees"] #view .employee-table th { height:32px !important; padding:6px 14px !important; background:var(--approval-ref-surface-soft) !important; color:var(--approval-ref-muted) !important; font-size:10px !important; font-weight:650 !important; letter-spacing:.6px; text-transform:uppercase; white-space:nowrap; }
html body[data-view="employees"] #view .employee-table td { height:auto !important; background:#fff !important; font-weight:450 !important; }
html body[data-view="employees"] #view .employee-table tr:hover td { background:var(--approval-ref-blue-soft) !important; }
html body[data-view="employees"] #view .employee-table tr:last-child td { border-bottom:0 !important; }
html body[data-view="employees"] #view .employee-table .employee-identity-cell { min-width:180px !important; }
html body[data-view="employees"] #view .employee-identity-cell :is(strong,.employee-code) { display:block !important; width:auto !important; max-width:none !important; overflow:visible !important; white-space:normal !important; text-overflow:clip !important; }
html body[data-view="employees"] #view .employee-identity-cell strong { color:var(--approval-ref-ink) !important; font-size:12px !important; font-weight:650 !important; }
html body[data-view="employees"] #view .employee-identity-cell .employee-code { margin:0 0 1px !important; padding:0 !important; line-height:1.2 !important; color:var(--approval-ref-muted) !important; font-size:10px !important; font-weight:500 !important; }
html body[data-view="employees"] #view :is(.employee-role-cell,.employee-branch-cell) { white-space:normal !important; overflow:visible !important; }
html body[data-view="employees"] #view :is(.employee-mobile-cell,.employee-salary-cell) { white-space:nowrap !important; font-variant-numeric:tabular-nums; }
html body[data-view="employees"] #view .employee-action-cell { min-width:228px !important; overflow:visible !important; }
html body[data-view="employees"] #view .split-actions { display:flex !important; flex-wrap:wrap !important; align-items:center; justify-content:flex-end; gap:5px !important; }
html body[data-view="employees"] #view .status { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; height:24px !important; min-height:24px !important; margin:0 !important; padding:0 9px !important; box-sizing:border-box !important; vertical-align:middle !important; border:1px solid var(--approval-ref-blue-line) !important; border-radius:7px !important; background:var(--approval-ref-blue-soft) !important; color:var(--approval-ref-blue) !important; font:650 10px/1 Inter,"Segoe UI",sans-serif !important; white-space:nowrap !important; }
/* Align each heading with the contents of its column. */
html body[data-view="employees"] #view .employee-table :is(th,td):nth-child(5) { text-align:right !important; font-variant-numeric:tabular-nums; }
html body[data-view="employees"] #view .employee-table :is(th,td):nth-child(n+6) { text-align:center !important; }
html body[data-view="employees"] #view .status.ok { border-color:var(--approval-ref-green-line) !important; background:var(--approval-ref-green-soft) !important; color:var(--approval-ref-green) !important; }
html body[data-view="employees"] #view .status.warn { border-color:var(--approval-ref-amber-line) !important; background:var(--approval-ref-amber-soft) !important; color:var(--approval-ref-amber) !important; }
html body[data-view="employees"] #view .status:is(.bad,.danger,.expired) { border-color:var(--approval-ref-red-line) !important; background:var(--approval-ref-red-soft) !important; color:var(--approval-ref-red) !important; }
@media(max-width:700px) { html body[data-view="employees"] #view .employee-directory-header { align-items:flex-start; flex-direction:column; gap:14px; padding:18px !important; } html body[data-view="employees"] #view .employee-directory-heading h2 { font-size:19px !important; } }
/* Open the employee first; management controls live in the selected file. */
html body[data-view="employees"] #view .employee-table .employee-name-link { display:block !important; width:auto !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:3px !important; background:transparent !important; color:var(--approval-ref-ink) !important; font:650 12px/1.45 Inter,"Segoe UI",sans-serif !important; text-align:left !important; white-space:normal !important; cursor:pointer; box-shadow:none !important; }
html body[data-view="employees"] #view .employee-table .employee-name-link:hover { color:var(--approval-ref-blue) !important; text-decoration:underline; }
html body .modal .employee-profile-actions { display:flex !important; align-items:center; flex-wrap:wrap; gap:7px; margin:14px 0 20px !important; padding:14px !important; border:1px solid var(--approval-ref-line); border-radius:12px; background:var(--approval-ref-surface-soft); }
html body .modal .employee-profile-actions > button { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:0 !important; height:34px !important; min-height:34px !important; padding:0 12px !important; border:1px solid var(--approval-ref-blue-line) !important; border-radius:8px !important; background:linear-gradient(135deg,#fff,var(--approval-ref-blue-soft)) !important; color:var(--approval-ref-blue) !important; font:650 11px/1.1 Inter,"Segoe UI",sans-serif !important; box-shadow:0 6px 16px rgba(40,111,232,.06) !important; cursor:pointer; }
html body .modal .employee-profile-actions > .employee-return-button { border-color:var(--approval-ref-green-line) !important; background:linear-gradient(135deg,#fff,var(--approval-ref-green-soft)) !important; color:var(--approval-ref-green) !important; }
html body .modal .employee-profile-actions > .danger-button { border-color:var(--approval-ref-red-line) !important; background:linear-gradient(135deg,#fff,var(--approval-ref-red-soft)) !important; color:var(--approval-ref-red) !important; }
html body .modal .employee-profile-actions > button:hover { filter:brightness(.97); }
html body .modal .employee-profile-actions > button:focus-visible { outline:3px solid var(--approval-ref-blue-line); outline-offset:2px; }