#hr .hr-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px; }
#hr .hr-toolbar h3 { margin:0; }
#hr .hr-toolbar input { width:290px; max-width:100%; border:1px solid var(--line); border-radius:5px; padding:8px 10px; font:inherit; }
.hr-sort-control { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; }
.hr-sort-control select { min-width:150px; border:1px solid var(--line); border-radius:5px; padding:8px 28px 8px 9px; background:#fff; color:var(--text); font:inherit; }
.hr-management-tabs { margin:0 0 12px; border-bottom:1px solid var(--line); }
.hr-management-tabs button { display:inline-flex; align-items:center; gap:7px; }
.hr-management-tabs button span { min-width:20px; padding:2px 5px; border-radius:10px; background:#eef1f3; color:var(--muted); font-size:10px; text-align:center; }
.hr-management-tabs button.active span { background:#fff0e9; color:#c7471b; }
.hr-subtitle { display:block; color:var(--muted); margin-top:2px; }
.hr-layout { display:grid; grid-template-columns:275px minmax(0,1fr); gap:16px; min-height:560px; }
.hr-people { border:1px solid var(--line); background:#fff; overflow:auto; max-height:calc(100vh - 235px); }
.hr-person { display:block; width:100%; text-align:left; padding:9px 10px; border:0; border-bottom:1px solid var(--line); background:transparent; color:inherit; border-radius:0; }
.hr-person[aria-current=true] { background:#edf5f3; box-shadow:inset 3px 0 #237b66; }
.hr-person:hover { background:#f6f8f8; }
.hr-person small { display:block; margin:3px 0 0; color:var(--muted); }
.hr-person-line { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.hr-person-line b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hr-person-line .badge { flex:none; font-size:10px; padding:2px 5px; }
.hr-record-head { display:flex; align-items:center; gap:10px; padding:4px 0 10px; }
.hr-record-head h3 { margin:0; }
.hr-record-title { display:flex; align-items:center; gap:8px; }
.hr-record-head small { display:block; color:var(--muted); margin-top:3px; }
.hr-status-dot { font-size:12px; color:var(--muted); }
.hr-status-dot::before { content:""; display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#9ca4aa; }
.hr-status-dot.active::before { background:#24835f; }
.hr-record-tabs { margin-bottom:0; }
.hr-alert { padding:7px 10px; border-left:3px solid #b92635; background:#fff0f1; color:#92212b; margin:6px 0; font-size:12px; }
.hr-probation { border-color:#ba8300; background:#fff5d2; color:#775300; }
.hr-reminder-summary { display:grid; grid-template-columns:170px minmax(0,1fr); gap:12px; align-items:start; padding:10px 12px; margin:0 0 12px; border:1px solid #e4cf91; background:#fffaf0; }
.hr-reminder-summary > b { padding-top:7px; }
.hr-reminder-summary > div { display:flex; flex-wrap:wrap; gap:7px; }
.hr-reminder-summary button { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid #d9b861; background:#fff; color:inherit; border-radius:5px; text-align:left; }
.hr-reminder-summary button.danger { border-color:#d98990; background:#fff3f4; }
.hr-reminder-summary button span { font-weight:700; }
.hr-reminder-summary button small { color:var(--muted); }
.hr-year-end-summary { margin:0 0 10px; border:1px solid #e0b786; background:#fff8ef; }
.hr-year-end-summary > summary { display:flex; align-items:center; gap:10px; min-height:34px; padding:5px 10px; cursor:pointer; list-style:none; }
.hr-year-end-summary > summary::-webkit-details-marker { display:none; }
.hr-year-end-summary > summary::before { content:"▸"; color:#8b6110; font-size:12px; }
.hr-year-end-summary[open] > summary::before { content:"▾"; }
.hr-year-end-summary > summary b { margin-right:auto; }
.hr-year-end-summary > summary span { padding:2px 7px; border-radius:10px; background:#fff0bd; color:#775300; font-size:10px; }
.hr-year-end-summary > summary small { color:var(--muted); }
.hr-year-end-summary > div { display:flex; flex-wrap:wrap; gap:6px; max-height:92px; overflow:auto; padding:7px 10px 9px 30px; border-top:1px solid #ead6ad; }
.hr-year-end-summary button { display:flex; align-items:center; gap:6px; padding:4px 7px; border:1px solid #d9b861; border-radius:5px; background:#fff; color:inherit; text-align:left; }
.hr-year-end-summary button.danger { border-color:#d98990; background:#fff3f4; }
.hr-year-end-summary button span { font-weight:700; }
.hr-year-end-summary button small { color:var(--muted); }
.hr-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; padding:8px 0; border-top:1px solid var(--line); }
.hr-metric { min-width:0; padding:8px 10px; border:1px solid var(--line); border-left:4px solid #24835f; border-radius:6px; background:#f2faf6; }
.hr-metric.warning { border-left-color:#ba8300; background:#fff8df; }
.hr-metric.danger { border-left-color:#b92635; background:#fff0f1; }
.hr-metric small, .hr-metric strong, .hr-metric span { display:block; }
.hr-metric small { color:var(--muted); font-size:10px; }
.hr-metric strong { margin-top:2px; font-size:17px; line-height:1.15; }
.hr-metric span { margin-top:2px; color:var(--muted); font-size:10px; line-height:1.25; }
.hr-section-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); }
.hr-data { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 14px; margin:8px 0 0; }
.hr-data dt { color:var(--muted); font-size:11px; margin-bottom:2px; }
.hr-data dd { margin:0; overflow-wrap:anywhere; white-space:pre-line; }
.hr-section { padding:10px 12px 12px 0; border-bottom:1px solid var(--line); }
.hr-section:nth-child(even) { padding-left:12px; border-left:1px solid var(--line); }
.hr-section h4 { margin:0; }
.hr-upload { display:flex; align-items:end; flex-wrap:wrap; gap:12px; padding:16px 0; }
.hr-upload .field { margin:0; flex:1 1 180px; }
.hr-visibility-note, .personal-document-note { padding:9px 11px; margin:0 0 12px; border-left:3px solid #d65b2b; background:#fff7f2; color:#5b514c; font-size:12px; }
.hr-signature { max-width:720px; }
.hr-notice { padding:12px; background:#f4f6f8; color:#4e5862; line-height:1.5; }
.hr-history { list-style:none; margin:16px 0; padding:0; }
.hr-history li { border-bottom:1px solid var(--line); padding:14px 0; overflow-wrap:anywhere; }
.hr-history small { display:block; color:var(--muted); margin-top:6px; }
.hr-file-list td { overflow-wrap:anywhere; }
#employeeModal .tabs { margin-bottom:20px; }
#employeeModal .hr-edit-pane[hidden] { display:none; }
.hr-file-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hr-file-actions .file-actions { margin:0; }
.hr-folder-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-items:start; }
.hr-folder { border:1px solid var(--line); background:#fff; min-width:0; }
.hr-folder-head { display:flex; align-items:center; gap:8px; padding:7px 9px; border-bottom:1px solid var(--line); background:#f7f8f9; }
.hr-folder-head h4 { margin:0; font-size:12px; }
.hr-folder-head small { color:var(--muted); }
.hr-folder-head > div { min-width:0; }
.hr-add-subfolder { margin-left:auto; white-space:nowrap; padding:3px 6px; font-size:10px; }
.hr-folder-icon { display:grid; place-items:center; width:24px; height:24px; border-radius:5px; background:#fff0e9; color:#c7471b; font-weight:700; }
.hr-folder-files { padding:2px 8px; max-height:300px; overflow:auto; }
.hr-subfolder { margin:4px 0; border:1px solid var(--line); border-radius:5px; background:#fafbfc; }
.hr-subfolder > summary { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:4px 7px; cursor:pointer; font-weight:600; font-size:11px; }
.hr-subfolder > summary::marker { content:''; }
.hr-subfolder-actions { display:flex; gap:4px; margin-left:auto; }
.hr-subfolder-actions .btn { min-width:24px; min-height:22px; padding:1px 4px; font-size:13px; }
.hr-subfolder-files { padding:0 9px; background:#fff; }
.hr-document-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.hr-document-controls { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.hr-document-controls select { max-width:150px; min-height:28px; padding:3px 5px; font-size:11px; }
.hr-document-row:last-child { border-bottom:0; }
.hr-document-row > div:first-child { min-width:0; }
.hr-document-row b, .hr-document-row small { display:block; overflow-wrap:anywhere; }
.hr-document-row small { color:var(--muted); margin-top:3px; }
.hr-document-row .badge { display:inline-block; margin-top:5px; font-size:10px; }
.hr-document-row .btn { padding:5px 7px; font-size:11px; }
.hr-empty { color:var(--muted); margin:6px 0; font-size:11px; }
.hr-folder-dialog { width:min(420px,94vw); }
.hr-folder-dialog h2 { font-size:17px; margin-bottom:5px; }
.hr-folder-dialog .field { margin-top:14px; }
.hr-empty-state { padding:45px 24px; text-align:center; border:1px dashed var(--line); background:#fff; }
.hr-empty-state h3 { margin:0 0 6px; }
.hr-empty-state p { margin:0; color:var(--muted); }
.hr-template-library { padding-bottom:16px; }
.hr-template-library .hr-upload { padding-top:4px; }
.hr-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.hr-change-list { overflow:auto; border:1px solid var(--line); background:#fff; }
.hr-change-table { width:100%; min-width:940px; border-collapse:collapse; }
.hr-change-table th { position:sticky; top:0; z-index:1; padding:9px 10px; border-bottom:1px solid var(--line); background:#f4f6f7; color:var(--muted); font-size:11px; text-align:left; text-transform:uppercase; }
.hr-change-table td { padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
.hr-change-table tbody tr:last-child td { border-bottom:0; }
.hr-change-before { color:#92212b; text-decoration:line-through; }
.hr-change-after { font-weight:700; }
.personal-workspace { border:1px solid var(--line); background:#fff; margin-bottom:16px; }
.personal-workspace-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.personal-workspace-head h3 { margin:0; }
.personal-workspace-head p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.personal-contract-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--line); }
.personal-contract-strip > div { padding:11px 16px; border-right:1px solid var(--line); }
.personal-contract-strip > div:last-child { border-right:0; }
.personal-contract-strip small, .personal-contract-strip b { display:block; }
.personal-contract-strip small { color:var(--muted); margin-bottom:4px; }
.personal-folders { padding:12px; }
.personal-document-note { margin:12px 12px 0; }
.personal-change-panel { display:grid; grid-template-columns:220px minmax(0,1fr); gap:18px; padding:14px 16px; border-top:1px solid var(--line); }
.personal-change-panel h4 { margin:0 0 4px; }
.personal-change-panel small { color:var(--muted); }
.personal-change-row { display:grid; grid-template-columns:155px minmax(0,1fr); gap:12px; padding:5px 0; border-bottom:1px solid var(--line); }
.personal-change-row:last-child { border-bottom:0; }
.personal-change-row time { color:var(--muted); font-size:12px; }
.signature-placement-modal { width:min(1180px,96vw); max-width:none; height:min(900px,94vh); display:flex; flex-direction:column; overflow:hidden; }
.signature-placement-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.signature-placement-head h2 { margin:0; }
.signature-placement-head p { margin:4px 0 0; color:var(--muted); }
.signature-placement-toolbar { display:flex; gap:8px; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--line); }
.signature-tool.employee { border-left:3px solid #e75b24; }
.signature-tool.manager { border-left:3px solid #2878b8; }
.signature-placement-workspace { min-height:0; flex:1; display:grid; grid-template-columns:minmax(0,1fr) 230px; grid-template-rows:auto minmax(0,1fr); gap:0 14px; }
.signature-page-nav { grid-column:1; display:flex; align-items:center; justify-content:center; gap:12px; padding:8px; }
.signature-page-scroll { grid-column:1; min-height:0; overflow:auto; padding:12px; background:#dfe3e7; border:1px solid #c9d0d6; }
.signature-page-stage { position:relative; margin:0 auto; background:#fff; box-shadow:0 2px 10px #0003; }
.signature-page-stage canvas { display:block; width:100%; height:100%; }
#signatureFieldLayer { position:absolute; inset:0; }
.signature-placement-help { grid-column:2; grid-row:1/3; border-left:1px solid var(--line); padding:12px 0 0 14px; overflow:auto; }
.signature-placement-help p { color:var(--muted); font-size:12px; line-height:1.5; }
.signature-placement-help ul { list-style:none; padding:0; margin:14px 0; }
.signature-placement-help li { display:flex; gap:7px; padding:7px 0; border-bottom:1px solid var(--line); font-size:12px; }
.signature-placement-help li.ready { color:#23743b; font-weight:700; }
.signature-placement-field { position:absolute; display:flex; align-items:center; justify-content:center; min-width:42px; min-height:22px; border:2px solid; background:#fff8; cursor:move; touch-action:none; user-select:none; }
.signature-placement-field.employee { border-color:#e75b24; background:#fff2ebd9; }
.signature-placement-field.manager { border-color:#2878b8; background:#eef6fcd9; }
.signature-placement-field span { padding:3px 19px 3px 5px; font-size:11px; font-weight:700; text-align:center; overflow:hidden; }
.signature-placement-field button { position:absolute; top:1px; right:1px; width:17px; height:17px; padding:0; border:0; background:#fff; color:#991f2b; cursor:pointer; line-height:1; }
.signature-placement-field i { position:absolute; right:-3px; bottom:-3px; width:12px; height:12px; border:2px solid #fff; background:currentColor; cursor:nwse-resize; }
#signaturePlacementStatus.ready, #hr-sign-placement-note.ready { color:#23743b; }
@media screen and (max-width:800px) {
  .hr-layout { grid-template-columns:1fr; }
  .hr-people { display:flex; overflow:auto; max-height:170px; }
  .hr-person { min-width:190px; }
  .hr-data, .hr-folder-grid, .hr-section-grid, .hr-template-grid { grid-template-columns:1fr; }
  .hr-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hr-section, .hr-section:nth-child(even) { padding:14px 0; border-left:0; }
  .personal-contract-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .personal-change-panel { grid-template-columns:1fr; }
  .hr-reminder-summary { grid-template-columns:1fr; }
  .hr-document-row { align-items:flex-start; flex-direction:column; }
  .signature-placement-modal { width:98vw; height:96vh; }
  .signature-placement-workspace { grid-template-columns:1fr; }
  .signature-placement-help { grid-column:1; grid-row:auto; max-height:130px; border-left:0; border-top:1px solid var(--line); padding:10px 0; }
}