[hidden]{display:none!important}.hr-dialog{width:min(840px,calc(100% - 24px));max-height:90dvh;border:1px solid #cdddee;border-radius:16px;padding:20px;color:#203752}.hr-dialog::backdrop{background:#14283d77}
.hr-dialog header,.hr-actions,.hr-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.hr-dialog h2{margin:0}.hr-dialog button{padding:7px 10px;border:1px solid #b9d3ee;border-radius:8px;background:#eff6ff;color:#15579c;cursor:pointer}
.hr-dialog input:not([type=checkbox]),.hr-dialog select,.hr-dialog textarea{width:100%;padding:7px;border:1px solid #c5d6e9;border-radius:7px}.hr-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0}.hr-fields label{display:grid;gap:5px;font-size:14px}.hr-row{padding:9px 0;border-bottom:1px solid #e1ebf5}#hrMessage{color:#9b3c29}.hr-actions{justify-content:flex-start;margin-top:10px}.auth #openApplicants,.auth #openStaff{white-space:nowrap}

.hr-dialog.hr-applicant-dialog[open] {
  box-sizing: border-box;
  width: min(1320px, calc(100% - 24px));
  height: 90dvh;
  display: flex;
  flex-direction: column;
}
.hr-applicant-dialog #hrContent {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.hr-applicant-grid {
  align-self: stretch;
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid #c5d6e9;
}
.hr-applicant-grid table {
  width: 100%;
  min-width: 940px;
  border-collapse: separate;
  border-spacing: 0;
}
.hr-applicant-grid :is(th, td) {
  padding: 9px 10px;
  border-right: 1px solid #c5d6e9;
  border-bottom: 1px solid #c5d6e9;
  vertical-align: middle;
}
.hr-applicant-grid :is(th, td):last-child { border-right: 0; }
.hr-applicant-grid th {
  position: sticky;
  top: 0;
  background: #dbeafe;
  font-weight: 650;
  white-space: nowrap;
}
.hr-applicant-grid td:nth-child(8) {
  min-width: 130px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.hr-applicant-grid td:nth-child(6) { white-space: nowrap; }
.hr-applicant-grid tr:hover td,
.hr-applicant-grid tr:focus-within td { background: #f0f7ff; }
.hr-applicant-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.hr-applicant-dialog header {
  border-bottom: 1px solid #111;
  padding-bottom: 10px;
}
.hr-applicant-grid { margin-inline: min(18px, 2vw); }
.hr-applicant-grid table { min-width: 780px; }
.hr-applicant-grid td { text-align: center; }
.hr-applicant-actions { justify-content: center; }
.hr-applicant-form .hr-fields {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.hr-applicant-form .hr-fields :is(input, select, textarea) {
  box-sizing: border-box;
  height: 36px;
  font: inherit;
}
.hr-applicant-form .hr-fields textarea { resize: none; }

.hr-dialog header form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.hr-grants {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #c5d6e9;
  border-radius: 8px;
}
.hr-grants p { margin: 0 0 8px; font-size: 13px; }
.hr-grants summary { cursor: pointer; }
.hr-grants label {
  display: flex;
  align-items: center;
  min-height: 32px;
  white-space: nowrap;
  gap: 6px;
  cursor: pointer;
}
.hr-grants summary label { display: inline-flex; padding-left: 4px; }
.hr-grants input[type=checkbox] {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  flex: 0 0 16px;
}
.hr-grant-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.hr-grant-row > details { max-width: 100%; }
.hr-grant-heading { font-weight: 650; }
.hr-grant-children {
  margin-left: 14px;
  padding-left: 10px;
  border-left: 1px solid #c5d6e9;
}

.hr-applicant-grid .hr-photo-cell { box-sizing: border-box; width: 90px; min-width: 90px; color: #687484; font-size: 13px; }
.hr-photo-cell img { display: block; width: 48px; height: 64px; object-fit: cover; border-radius: 4px; margin: auto; }
.hr-crop-frame { position: relative; width: fit-content; max-width: 100%; }
.hr-crop-frame canvas { display: block; max-width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.hr-crop-outline { position: absolute; border: 2px solid #2185ff; background: #2185ff22; box-sizing: border-box; pointer-events: none; }
.hr-crop-preview { display: block; width: 72px; height: 96px; margin-top: 10px; }
.hr-applicant-form fieldset { border: 1px solid #c5d6e9; border-radius: 8px; }

.hr-employee-form { width: 100%; overflow: auto; }
.hr-employee-grid { overflow: auto; border: 1px solid #c5d6e9; }
.hr-employee-grid table { width: 100%; min-width: 620px; border-collapse: collapse; table-layout: fixed; }
.hr-employee-grid :is(th, td) { padding: 10px; border: 1px solid #c5d6e9; vertical-align: middle; }
.hr-employee-grid th { width: 112px; background: #dbeafe; text-align: center; }
.hr-employee-grid .hr-fields { display: block; margin: 0; }
.hr-employee-grid :is(input, select, textarea) { box-sizing: border-box; }
.hr-employee-grid textarea { min-height: 70px; resize: vertical; }

#hrDialog > header:has(> #hrEmployeeToolbar) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
#hrDialog > header:has(> #hrEmployeeToolbar) > form {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0;
}
#hrEmployeeToolbar {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}
#hrDialog > header:has(> #hrEmployeeToolbar) button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: clamp(76px, 24vw, 104px);
  padding: 0 8px;
  white-space: nowrap;
}
#hrDialog #hrCancelHire { border-color: #eab4b4; color: #a12525; }
#hrDialog > header:has(> #hrEmployeeToolbar) #hrSave {
  background: #15579c;
  border-color: #15579c;
  color: white;
}
@media (max-width: 620px) {
  #hrDialog > header:has(> #hrEmployeeToolbar) { grid-template-columns: minmax(0, 1fr); }
  #hrDialog > header:has(> #hrEmployeeToolbar) > form { grid-column: 1; grid-row: 3; flex-wrap: wrap; }
}
.hr-employment-grants {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin-bottom: 8px;
  overflow-x: auto;
}
.hr-employment-grants label { flex: none; }
.hr-employee-list th { text-align: center; }
.hr-employee-list td:nth-child(8) { min-width: 90px; }
.hr-preview-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hr-preview-actions { width: 100%; }
.hr-preview-crop { margin-left: auto; }
.hr-resume-view {
  box-sizing: border-box;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  border: 1px solid #c5d6e9;
  background: #eef3f8;
}
.hr-resume-sheet :is(img, canvas) { display: block; width: 100%; height: auto; }

.hr-leave-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; }
.hr-leave-calendar {
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  align-self:stretch; flex:none; gap:4px; padding:2px;
}
.hr-leave-weekday { text-align:center; font-weight:700; padding:5px; }
.hr-dialog .hr-leave-date {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; gap:4px;
  min-height:116px; text-align:left; padding:8px; background:white; color:#23364a;
}
.hr-leave-roster { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(5,auto); grid-auto-flow:column; gap:2px 5px; color:#23364a; }
.hr-leave-overflow { grid-column:1 / -1; }
.hr-leave-date span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.hr-leave-date small { font-size:11px; }
.hr-leave-calendar .day-0 { color:#b32635; }
.hr-leave-calendar .day-6 { color:#145db3; }
@media (hover: hover) {
  .hr-dialog .hr-leave-date:hover { background:#80b6ef; border-color:#467db8; }
  .hr-dialog .hr-leave-date.day-6:hover { color:#103b72; }
  .hr-dialog .hr-leave-date.day-0:hover { color:#751823; }
}
.hr-dialog .hr-leave-today { border:2px solid #347cc2; }
.hr-applicant-grid input[type=checkbox] { width:16px; height:16px; padding:0; }
.hr-employee-form .hr-applicant-grid table { min-width:380px; }

.hr-employee-grid table:has(.hr-employee-leave-details) { min-width: 840px; }
.hr-employee-leave-details { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.hr-employee-leave-details label {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.hr-employee-leave-details textarea { flex: 1; min-width: 0; }
.hr-employee-leave-details textarea {
  min-height: 0;
  height: 34px;
  font: inherit;
}
.hr-dialog .hr-employee-leave-details input[type=number] {
  width: 62px;
  height: 34px;
}
.hr-leave-roster > span { display: flex; align-items: baseline; gap: 3px; }
.hr-leave-roster b { flex: none; font-size: 11px; }


#hrDialog > header > form:has(#hrLeaveSearch) { display:flex; align-items:center; gap:8px; }
#hrDialog #hrLeaveSearch { box-sizing:border-box; width:clamp(105px,28vw,220px); height:36px; }
.wb-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.hr-dialog .wb-controls input { width:auto; }
.wb-region { width:100%; min-height:0; overflow:auto; }
.wb-table { width:100%; min-width:940px; table-layout:fixed; border-collapse:collapse; color:#1c3148; }
.wb-title { padding:12px; font-size:24px; font-weight:750; color:#142943; }
.wb-table :is(th,td) { border:1px solid #c8d6e5; text-align:center; }
.wb-table th { padding:8px 4px; }
.wb-table thead { background:#142943; color:white; }
.wb-table .wb-orders,.wb-table tfoot { background:#e8f0fa; color:#142943; }
.wb-table .wb-quantity { background:#fff3ed; color:#a53227; }
.wb-table tbody th { background:#e8f0fa; }
.wb-table tbody tr:nth-child(even) { background:#f6f9fd; }
.hr-dialog .wb-table input { box-sizing:border-box; border:0; background:transparent; text-align:center; color:inherit; font-weight:650; }
.hr-dialog .wb-table tbody button { display:block; width:100%; min-height:34px; padding:4px; border:0; border-radius:0; color:inherit; background:transparent; white-space:pre-wrap; overflow-wrap:anywhere; user-select:none; }
.hr-dialog .wb-table button.selected { background:#a8c8f455; box-shadow:inset 0 0 0 2px #2f6cbd; }
.wb-table tfoot tr:first-child { background:#fff1ca; }
.wb-table tfoot tr:first-child td:nth-child(8) { background:#ffd875; }
.wb-menu { position:fixed; z-index:2; display:grid; gap:4px; width:145px; padding:8px; background:white; border:1px solid #c8d6e5; border-radius:8px; box-shadow:0 4px 20px #14294333; }
.wb-editor { width:min(400px,80vw); border:1px solid #c8d6e5; border-radius:12px; }
.wb-editor textarea { box-sizing:border-box; resize:vertical; }
.wb-editor div { display:flex; gap:8px; justify-content:flex-end; }
#hrDialog > header > form:has(#hrRegisterEmployee) { display:flex; align-items:center; gap:8px; }
.hr-dialog .wb-table button[data-metric] {
  display:block; width:100%; min-height:34px; padding:4px; border:0;
  border-radius:0; color:inherit; background:transparent; font-weight:650;
}
.hr-dialog .wb-table button[data-metric]:focus,
.hr-dialog .wb-table tbody button:focus-visible {
  outline:none; background:#2462a8; color:white;
}
.hr-dialog.hr-applicant-dialog.wb-fullscreen[open] {
  width: calc(100% - 12px);
  height: calc(100dvh - 12px);
  max-width: none;
  max-height: none;
  padding: clamp(8px, 1vw, 18px);
}
.wb-fullscreen .wb-region { flex: 1; }

.hr-leave-roster .hr-leave-limit { color:#b32635; }
.wb-table thead, .wb-table tfoot { position:sticky; z-index:1; }
.wb-table thead { top:0; }
.wb-table tfoot { bottom:0; }
.wb-editor .wb-staff-list { display:block; overflow:auto; max-height:45dvh; }
.wb-staff-list button { display:block; width:100%; text-align:left; margin:4px 0; }
.wb-editor .wb-staff-tabs { justify-content:flex-start; margin-bottom:8px; }
.wb-staff-tabs [aria-pressed="true"] { background:#15579c; color:white; }
.wb-controls { width:100%; }
.wb-output-actions { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.wb-leave-settings { margin:4px 8px; }
.wb-leave-option { display:flex; align-items:center; gap:8px; padding:6px; }
.wb-table .wb-leave-names { text-align:left; padding-left:8px; }
.wb-leave-option input[type=checkbox] { width:16px; height:16px; flex:0 0 16px; margin:0; }
.wb-leave-option > span { white-space:nowrap; }
.wb-staff-heading { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.wb-staff-heading::after { content:''; flex:1; border-top:1px solid #aabbd0; }
.wb-editor .wb-staff-tabs { gap:4px; overflow-x:auto; }
.wb-editor .wb-staff-tabs button { flex:none; white-space:nowrap; font-size:12px; padding:5px 6px; }
.hr-dialog .wb-table .wb-leave-conflict {
  color:#b32129;
  font-weight:700;
  animation:wb-leave-blink 1.3s ease-in-out infinite;
}
@keyframes wb-leave-blink { 50% { opacity:.35; } }
@media (prefers-reduced-motion:reduce) {
  .hr-dialog .wb-table .wb-leave-conflict { animation:none; }
}

#hrDialog.hr-employee-directory > header { border-bottom:1px solid #5384b9; padding-bottom:14px; }
.hr-directory-heading small { color:#2866a9; font-weight:700; }
.hr-directory-heading h2 { margin:4px 0; color:#172837; font-size:clamp(24px,3vw,38px); }
.hr-directory-heading p { margin:4px 0 0; color:#50647b; font-size:14px; }
.hr-directory-tools { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; width:100%; }
.hr-directory-tools strong, .hr-directory-badge { background:#e0edfc; color:#23598e; padding:4px 10px; border-radius:999px; }
.hr-dialog .hr-directory-tools input { width:min(100%,300px); box-sizing:border-box; border-color:#bad1e9; }
.hr-employee-directory .hr-employee-list { border:1px solid #c8dbee; border-radius:10px; }
.hr-employee-directory .hr-employee-list :is(th,td) { border-right:0; border-bottom:1px solid #c8dbee; }
.hr-employee-directory .hr-employee-list th { background:#d8e9fb; color:#173e68; }
.hr-employee-directory .hr-employee-list tbody tr:hover { background:#f2f7fd; }
.hr-directory-name { font-weight:750; color:#172837; }
.hr-dialog.hr-employee-directory button { background:white; color:#23598e; border-color:#9abde1; }
.hr-dialog.hr-employee-directory #hrRegisterEmployee { background:#2866a9; color:white; border-color:#2866a9; }
.wb-editor:has(.wb-staff-heading) { box-sizing:border-box; width:min(800px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); }
.wb-editor:has(.wb-staff-heading) .wb-staff-list { min-height:min(160px,25dvh); }
.wb-editor .wb-staff-list:has(.wb-staff-empty) { display:grid; place-items:center; place-content:center; }
.wb-staff-empty { margin:0; text-align:center; }
.hr-leave-print-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; width:100%; }
.hr-directory-order { display:flex; gap:6px; margin-left:auto; }
.hr-dialog.hr-employee-directory .hr-directory-pick { padding:4px 6px; border:0; background:transparent; color:inherit; font:inherit; }
.hr-employee-directory .hr-employee-list tbody tr.hr-directory-selected { background:#d4e6fa; }
.wb-editor:has(.wb-staff-heading) { padding:20px; }
.wb-editor .wb-staff-heading { font-size:clamp(20px,3vw,27px); }
.wb-editor:has(.wb-staff-heading) .wb-staff-tabs { justify-content:safe center; gap:8px; }
.wb-editor:has(.wb-staff-heading) .wb-staff-tabs button { font-size:15px; padding:8px 10px; }
.wb-editor:has(.wb-staff-heading) .wb-staff-list button { font-size:17px; padding:10px 12px; }
.wb-editor:has(.wb-staff-heading) .wb-staff-empty { font-size:17px; }

#hrDialog.hr-leave-dialog[open] {
  width: calc(100% - 20px);
  height: auto;
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  scrollbar-width: none;
}
.hr-leave-dialog #hrContent { flex: none; }
.hr-leave-dialog .hr-leave-date { min-width: 0; min-height: clamp(66px, 11dvh, 120px); }
@media (max-width: 700px) {
  #hrDialog.hr-leave-dialog[open] { padding: 10px; }
  .hr-leave-dialog .hr-leave-date { padding: 4px; grid-template-columns: minmax(0, 1fr); }
  .hr-leave-dialog .hr-leave-roster { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .hr-leave-dialog .hr-leave-roster b { display: none; }
}

.hr-leave-dialog .hr-leave-nav h2 { font-size: clamp(17px, 3.2vw, 30px); }
@media (max-width: 420px) {
  .hr-leave-dialog .hr-leave-nav { gap: 4px; }
  .hr-leave-dialog .hr-leave-nav button { padding-inline: 6px; }
  .hr-leave-dialog .hr-leave-date small { font-size: 10px; }
}