/* =====================================================================
   Pockets HR — design system
   One stylesheet for the whole app. Loaded after Bootstrap 4 and
   restyles its components, so older pages pick up the new look too.
   ===================================================================== */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* brand */
  --hr-blue: #1f7fd6;
  --hr-blue-600: #1a6fbd;
  --hr-blue-700: #155b9c;
  --hr-blue-50: #eaf3fc;
  --hr-green: #2fb24c;
  --hr-green-700: #1e8a3a;
  --hr-green-50: #e9f7ec;

  /* neutrals */
  --hr-ink: #0f2233;          /* sidebar */
  --hr-ink-2: #173049;
  --hr-canvas: #f3f6f9;
  --hr-surface: #ffffff;
  --hr-surface-2: #f8fafc;
  --hr-line: #e1e7ee;
  --hr-line-strong: #cfd8e2;
  --hr-text: #15212d;
  --hr-muted: #5b6b7b;
  --hr-faint: #8a97a5;

  /* status */
  --hr-red: #cf3f3f;
  --hr-red-50: #fcecec;
  --hr-amber: #b7770a;
  --hr-amber-50: #fdf4e3;
  --hr-teal: #0f8a8a;
  --hr-teal-50: #e6f5f5;

  --hr-radius-sm: 6px;
  --hr-radius: 8px;
  --hr-radius-lg: 12px;
  --hr-shadow-pop: 0 10px 30px -12px rgba(15, 34, 51, .28), 0 2px 6px rgba(15, 34, 51, .06);
  --hr-sidebar-w: 248px;
  --hr-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- base ---------- */
html { font-size: 15px; }
body.hr-app,
body.hr-auth {
  font-family: var(--hr-font);
  color: var(--hr-text);
  background: var(--hr-canvas);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.hr-app h1, .hr-app h2, .hr-app h3, .hr-app h4, .hr-app h5, .hr-app h6 {
  font-family: var(--hr-font);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hr-text);
}
.hr-app h2 { font-size: 1.35rem; }
.hr-app h3 { font-size: 1.2rem; }
.hr-app h4 { font-size: 1.07rem; }
.hr-app h5 { font-size: 1rem; }
a { color: var(--hr-blue-600); }
a:hover { color: var(--hr-blue-700); }
.text-muted { color: var(--hr-muted) !important; }
.tnum, .table td, .hr-kpi-value { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--hr-blue); outline-offset: 2px; }

/* legacy pages set fonts inline (Times New Roman, Courier) — normalise */
.hr-content [style*="font-family"] { font-family: inherit !important; }
.hr-content font[face] { font-family: inherit; }

.hr-skip {
  position: absolute; left: -999px; top: 8px; z-index: 2000;
  background: var(--hr-surface); padding: 8px 12px; border-radius: var(--hr-radius);
}
.hr-skip:focus { left: 8px; }

/* ---------- shell ---------- */
.hr-shell { display: flex; min-height: 100vh; }
.hr-main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--hr-sidebar-w); }
.hr-content { flex: 1; padding: 24px 32px 40px; max-width: 1480px; width: 100%; }

/* sidebar */
.hr-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--hr-sidebar-w); z-index: 1040;
  background: var(--hr-ink); color: #c4d1de;
  display: flex; flex-direction: column;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a4762 transparent;
}
.hr-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 20px 14px; color: #fff; text-decoration: none !important;
}
.hr-brand:hover { color: #fff; }
.hr-brand-mark { width: 30px; height: 30px; flex: none; }
.hr-brand-text { font-size: 1.12rem; font-weight: 500; letter-spacing: -0.01em; }
.hr-brand-text b { font-weight: 700; color: #7ec4ff; }

.hr-company {
  margin: 4px 14px 14px; padding: 9px 12px;
  display: flex; align-items: center; gap: 9px;
  background: var(--hr-ink-2); border-radius: var(--hr-radius);
  font-size: .86rem; color: #e6eef6;
}
.hr-company-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hr-green); flex: none; box-shadow: 0 0 0 3px rgba(47, 178, 76, .18); }
.hr-company-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

.hr-nav { padding: 0 10px 12px; flex: 1; }
.hr-nav-group { margin-bottom: 12px; }
.hr-nav-label {
  padding: 10px 12px 6px; font-size: .76rem; font-weight: 600; color: #7d93a8;
  letter-spacing: .02em;
}
.hr-nav-link {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 8px 12px; margin: 1px 0; border-radius: var(--hr-radius);
  color: #c4d1de; font-size: .93rem; text-decoration: none !important;
  transition: background .12s, color .12s;
}
.hr-nav-link i { width: 18px; text-align: center; color: #7d93a8; font-size: .92rem; transition: color .12s; }
.hr-nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.hr-nav-link:hover i { color: #c4d1de; }
.hr-nav-link.is-active { background: rgba(31, 127, 214, .22); color: #fff; font-weight: 500; }
.hr-nav-link.is-active i { color: #7ec4ff; }
.hr-nav-link.is-active::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--hr-green);
}
.hr-sidebar-foot { padding: 10px; border-top: 1px solid rgba(255, 255, 255, .07); }
.hr-vendor { padding: 6px 12px 4px; font-size: .74rem; color: #5f7790; }

/* topbar */
.hr-topbar {
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: 16px;
  height: 64px; padding: 0 32px;
  background: rgba(243, 246, 249, .86);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--hr-line);
}
.hr-search {
  position: relative; flex: 1; max-width: 460px;
}
.hr-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--hr-faint); font-size: .85rem; }
.hr-search input {
  width: 100%; height: 40px; padding: 0 44px 0 36px;
  border: 1px solid var(--hr-line); border-radius: var(--hr-radius);
  background: var(--hr-surface); font: inherit; font-size: .92rem; color: var(--hr-text);
}
.hr-search input::placeholder { color: var(--hr-faint); }
.hr-search input:focus { outline: none; border-color: var(--hr-blue); box-shadow: 0 0 0 3px rgba(31, 127, 214, .15); }
.hr-search kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: var(--hr-surface-2); color: var(--hr-muted); border: 1px solid var(--hr-line);
  box-shadow: none; font-size: .75rem; padding: 1px 6px; border-radius: 4px; font-family: inherit;
}
.hr-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hr-icon-btn {
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  border: 0; background: transparent; border-radius: var(--hr-radius);
  color: var(--hr-muted); font-size: 1.05rem;
}
.hr-icon-btn:hover { background: var(--hr-surface); color: var(--hr-text); }
.hr-nav-toggle { display: none; }
.hr-user {
  display: flex; align-items: center; gap: 10px;
  border: 0; background: transparent; padding: 5px 8px 5px 5px; border-radius: 999px;
  color: var(--hr-text); text-align: left;
}
.hr-user:hover { background: var(--hr-surface); }
.hr-user-text { display: flex; flex-direction: column; line-height: 1.2; }
.hr-user-text strong { font-size: .88rem; font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-user-text small { font-size: .76rem; color: var(--hr-muted); }
.hr-caret { font-size: .65rem; color: var(--hr-faint); }

.hr-avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--hr-blue-50); color: var(--hr-blue-700);
  font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}
.hr-avatar.is-lg { width: 64px; height: 64px; font-size: 1.3rem; }
.hr-avatar.tone-1 { background: #e7f0fb; color: #1a5fa3; }
.hr-avatar.tone-2 { background: #e8f6ec; color: #1e7a37; }
.hr-avatar.tone-3 { background: #fdf0e1; color: #a2610a; }
.hr-avatar.tone-4 { background: #f1ebfa; color: #6440a0; }
.hr-avatar.tone-5 { background: #e5f4f4; color: #0e7272; }

/* page head */
.hr-page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 6px 0 22px;
}
.hr-page-title { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.2; }
.hr-page-sub { margin: 6px 0 0; color: var(--hr-muted); font-size: .95rem; }
.hr-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.hr-footer {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 18px 32px; color: var(--hr-faint); font-size: .8rem;
  border-top: 1px solid var(--hr-line);
}

/* ---------- panels (cards) ---------- */
.hr-panel, .hr-content .card {
  background: var(--hr-surface);
  border: 1px solid var(--hr-line);
  border-radius: var(--hr-radius-lg);
  box-shadow: 0 1px 2px rgba(15, 34, 51, .04);
}
.hr-panel { margin-bottom: 20px; }
.hr-panel-head, .hr-content .card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; background: transparent;
  border-bottom: 1px solid var(--hr-line);
  font-weight: 600; font-size: .98rem;
}
.hr-content .card-header:first-child { border-radius: var(--hr-radius-lg) var(--hr-radius-lg) 0 0; }
.hr-panel-head h2, .hr-panel-head h3 { font-size: 1rem; margin: 0; }
.hr-panel-head .hr-panel-sub { font-weight: 400; color: var(--hr-muted); font-size: .86rem; }
.hr-panel-body, .hr-content .card-body { padding: 20px; }
.hr-content .card-footer { background: transparent; border-top: 1px solid var(--hr-line); }
.hr-content .card-footer:empty, .hr-content .card-footer.small.text-muted { display: none; }
.hr-panel-body.is-flush { padding: 0; }

/* ---------- KPIs ---------- */
.hr-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.hr-kpi {
  position: relative; display: block; padding: 18px 20px 16px;
  background: var(--hr-surface); border: 1px solid var(--hr-line); border-radius: var(--hr-radius-lg);
  color: var(--hr-text); text-decoration: none !important;
  transition: border-color .15s;
}
a.hr-kpi:hover { border-color: var(--hr-line-strong); color: var(--hr-text); }
.hr-kpi-label { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--hr-muted); }
.hr-kpi-icon {
  width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; font-size: .8rem;
  background: var(--hr-blue-50); color: var(--hr-blue-600);
}
.hr-kpi-icon.is-green { background: var(--hr-green-50); color: var(--hr-green-700); }
.hr-kpi-icon.is-amber { background: var(--hr-amber-50); color: var(--hr-amber); }
.hr-kpi-icon.is-teal { background: var(--hr-teal-50); color: var(--hr-teal); }
.hr-kpi-value { display: block; margin-top: 12px; font-size: 1.9rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.hr-kpi-meta { display: block; margin-top: 6px; font-size: .83rem; color: var(--hr-muted); }
.hr-meter { height: 6px; margin-top: 12px; border-radius: 99px; background: #edf1f5; overflow: hidden; }
.hr-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--hr-blue); }
.hr-meter.is-over > span { background: var(--hr-red); }

/* ---------- payroll band (dashboard feature) ---------- */
.hr-payband {
  display: grid; grid-template-columns: 1.1fr 2fr; gap: 0;
  background: var(--hr-ink); color: #dfe8f1; border-radius: var(--hr-radius-lg);
  overflow: hidden; margin-bottom: 20px;
}
.hr-payband-sum { padding: 22px 24px; border-right: 1px solid rgba(255, 255, 255, .08); }
.hr-payband-sum h2 { color: #fff; font-size: 1rem; font-weight: 500; margin: 0 0 14px; }
.hr-payband-total { font-size: 2.3rem; font-weight: 600; color: #fff; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.hr-payband-note { margin-top: 8px; font-size: .86rem; color: #9fb3c7; }
.hr-payband-split { display: flex; gap: 22px; margin-top: 18px; font-size: .84rem; color: #9fb3c7; }
.hr-payband-split strong { display: block; color: #fff; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hr-payband-chart { padding: 18px 24px 14px; min-height: 210px; position: relative; }
.hr-payband-chart canvas { width: 100% !important; }
.hr-payband .btn-light { background: #fff; border-color: #fff; color: var(--hr-ink); }

/* ---------- lists ---------- */
.hr-list { list-style: none; margin: 0; padding: 0; }
.hr-list li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--hr-line); }
.hr-list li:first-child { border-top: 0; }
.hr-list .hr-list-main { flex: 1; min-width: 0; }
.hr-list .hr-list-main strong { display: block; font-weight: 600; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-list .hr-list-main span { display: block; font-size: .83rem; color: var(--hr-muted); }
.hr-empty { padding: 28px 20px; text-align: center; color: var(--hr-muted); font-size: .92rem; }
.hr-empty i { display: block; font-size: 1.4rem; color: var(--hr-faint); margin-bottom: 8px; }

/* person cell */
.hr-person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.hr-person .hr-avatar { width: 32px; height: 32px; font-size: .74rem; }
.hr-person-name { font-weight: 600; color: var(--hr-text); display: block; line-height: 1.25; }
a.hr-person-name:hover { color: var(--hr-blue-700); }
.hr-person-sub { font-size: .82rem; color: var(--hr-muted); display: block; }

/* badges / pills */
.hr-pill, .hr-content .badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.4;
  background: #eef2f6; color: var(--hr-muted);
}
.hr-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.hr-pill.no-dot::before { display: none; }
.hr-pill.is-green, .hr-content .badge-success { background: var(--hr-green-50); color: var(--hr-green-700); }
.hr-pill.is-blue, .hr-content .badge-primary, .hr-content .badge-info { background: var(--hr-blue-50); color: var(--hr-blue-700); }
.hr-pill.is-amber, .hr-content .badge-warning { background: var(--hr-amber-50); color: var(--hr-amber); }
.hr-pill.is-red, .hr-content .badge-danger { background: var(--hr-red-50); color: var(--hr-red); }
.hr-pill.is-teal { background: var(--hr-teal-50); color: var(--hr-teal); }

/* ---------- buttons ---------- */
.hr-app .btn {
  font-family: var(--hr-font); font-weight: 600; font-size: .9rem;
  border-radius: var(--hr-radius); padding: .5rem .95rem; line-height: 1.35;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.hr-app .btn-block { display: flex; }
.hr-app .btn-sm { font-size: .8rem; padding: .32rem .65rem; border-radius: var(--hr-radius-sm); }
.hr-app .btn-lg { font-size: 1rem; padding: .7rem 1.2rem; }
.hr-app .btn:focus, .hr-app .btn.focus { box-shadow: 0 0 0 3px rgba(31, 127, 214, .2); }
.hr-app .btn-primary { background: var(--hr-blue); border-color: var(--hr-blue); color: #fff; }
.hr-app .btn-primary:hover, .hr-app .btn-primary:not(:disabled):active { background: var(--hr-blue-600); border-color: var(--hr-blue-600); }
.hr-app .btn-light, .hr-app .btn-secondary, .hr-app .btn-outline-secondary, .hr-app .btn-default {
  background: var(--hr-surface); border: 1px solid var(--hr-line-strong); color: var(--hr-text);
}
.hr-app .btn-light:hover, .hr-app .btn-secondary:hover, .hr-app .btn-outline-secondary:hover, .hr-app .btn-default:hover {
  background: var(--hr-surface-2); border-color: #b9c5d2; color: var(--hr-text);
}
/* legacy coloured buttons become soft, tinted actions */
.hr-app .btn-success { background: var(--hr-green-50); border: 1px solid #c7e9cf; color: var(--hr-green-700); }
.hr-app .btn-success:hover { background: #d9f1df; border-color: #a9dcb5; color: #176c2d; }
.hr-app .btn-info { background: var(--hr-blue-50); border: 1px solid #c9def3; color: var(--hr-blue-700); }
.hr-app .btn-info:hover { background: #dbeaf9; border-color: #a8c8ea; color: #114c84; }
.hr-app .btn-warning { background: var(--hr-amber-50); border: 1px solid #f1dcb2; color: var(--hr-amber); }
.hr-app .btn-warning:hover { background: #fbebcc; border-color: #e8c98a; color: #8f5d07; }
.hr-app .btn-danger { background: var(--hr-red-50); border: 1px solid #f2c9c9; color: var(--hr-red); }
.hr-app .btn-danger:hover { background: #f9dcdc; border-color: #e8a8a8; color: #a92f2f; }
.hr-app .btn-dark { background: var(--hr-ink); border-color: var(--hr-ink); color: #fff; }
.hr-app .btn-solid-green { background: var(--hr-green-700); border-color: var(--hr-green-700); color: #fff; }
.hr-app .btn-solid-green:hover { background: #1a7833; color: #fff; }
.hr-app .btn-link { font-weight: 500; color: var(--hr-blue-600); }
.hr-app .btn-ghost { background: transparent; border: 1px solid transparent; color: var(--hr-muted); }
.hr-app .btn-ghost:hover { background: var(--hr-surface-2); color: var(--hr-text); }
/* the old full-width "Export to Excel" bar */
.hr-content a#export.btn-block { display: inline-flex; width: auto; margin: 0 0 16px !important; }
.hr-content a#export::before { content: "\f1c3"; font-family: "Font Awesome 5 Free"; font-weight: 400; }

/* ---------- forms ---------- */
.hr-app label { display: block; font-size: .88rem; font-weight: 600; color: var(--hr-text); margin-bottom: 6px; }
.hr-app .form-control, .hr-app .custom-select, .hr-app .form-select,
.hr-content input[type="text"]:not(.form-control):not([readonly]),
.hr-content input[type="number"]:not(.form-control), .hr-content input[type="date"]:not(.form-control),
.hr-content input[type="email"]:not(.form-control), .hr-content input[type="password"]:not(.form-control),
.hr-content select:not(.form-control):not(.custom-select) {
  height: 40px; padding: .45rem .8rem;
  font: inherit; font-size: .93rem; color: var(--hr-text);
  background-color: var(--hr-surface); border: 1px solid var(--hr-line-strong); border-radius: var(--hr-radius);
  box-shadow: none; transition: border-color .12s, box-shadow .12s;
}
.hr-app textarea.form-control { height: auto; min-height: 96px; }
.hr-app .form-control[type="file"] { padding: .38rem .6rem; }
.hr-app .form-control:focus, .hr-app .custom-select:focus, .hr-app .form-select:focus,
.hr-content input:focus, .hr-content select:focus, .hr-content textarea:focus {
  outline: none; border-color: var(--hr-blue); box-shadow: 0 0 0 3px rgba(31, 127, 214, .15);
}
.hr-app .form-control[readonly], .hr-app .form-control:disabled { background: var(--hr-surface-2); color: var(--hr-muted); }
.hr-app .form-text, .hr-help { font-size: .82rem; color: var(--hr-muted); }
.hr-app .form-select { display: block; width: 100%; appearance: auto; }
.hr-app .input-group-text { background: var(--hr-surface-2); border-color: var(--hr-line-strong); color: var(--hr-muted); border-radius: var(--hr-radius); }

.hr-form-section { padding: 20px; border-top: 1px solid var(--hr-line); }
.hr-form-section:first-child { border-top: 0; }
.hr-form-section > h3 { font-size: 1rem; margin: 0 0 4px; }
.hr-form-section > p { margin: 0 0 16px; color: var(--hr-muted); font-size: .88rem; }
.hr-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px 18px; }
.hr-form-grid .form-group { margin: 0; }
.hr-form-grid .is-wide { grid-column: 1 / -1; }
.hr-form-actions {
  display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px;
  border-top: 1px solid var(--hr-line); background: var(--hr-surface-2);
  border-radius: 0 0 var(--hr-radius-lg) var(--hr-radius-lg);
}

/* ---------- tables ---------- */
.hr-content .table {
  margin-bottom: 0; color: var(--hr-text); font-size: .9rem;
  border-collapse: separate; border-spacing: 0;
}
.hr-content .table-bordered, .hr-content .table-bordered td, .hr-content .table-bordered th { border: 0; }
.hr-content .table thead th,
.hr-content .table thead.table-dark th, .hr-content .table .thead-dark th {
  background: var(--hr-surface-2); color: var(--hr-muted);
  font-size: .76rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  border-top: 0; border-bottom: 1px solid var(--hr-line); padding: 10px 14px; white-space: nowrap; vertical-align: middle;
}
.hr-content .table td { padding: 11px 14px; border-top: 1px solid var(--hr-line); vertical-align: middle; }
.hr-content .table tbody tr:first-child td { border-top: 0; }
.hr-content .table-hover tbody tr:hover, .hr-content table.dataTable tbody tr:hover { background: #f6f9fc; }
.hr-content .table td .btn + .btn { margin-left: 4px; }
.hr-content .table tfoot:empty, .hr-content .table tfoot tr:empty { display: none; }
.hr-num { text-align: right; white-space: nowrap; }
.hr-content .table th.hr-num { text-align: right; }
.hr-table-wrap { overflow-x: auto; }
.hr-content .table-responsive { border-radius: inherit; }

/* DataTables */
.hr-content .dataTables_wrapper { padding: 0; }
.hr-content .dataTables_wrapper .row:first-child,
.hr-content .dataTables_wrapper .row:last-child { padding: 12px 16px; margin: 0; align-items: center; }
.hr-content .dataTables_wrapper .row:nth-child(2) { margin: 0; }
.hr-content .dataTables_wrapper .row:nth-child(2) > div { padding: 0; overflow-x: auto; }
.hr-content .dataTables_wrapper .row:last-child { border-top: 1px solid var(--hr-line); }
.hr-content .dataTables_length label, .hr-content .dataTables_filter label,
.hr-content .dataTables_info { font-size: .85rem; font-weight: 500; color: var(--hr-muted); margin: 0; }
.hr-content .dataTables_filter input {
  height: 36px !important; width: 240px !important; margin-left: 8px !important;
  padding-left: 30px !important;
  background: var(--hr-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a97a5' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center !important;
}
.hr-content .dataTables_length select { height: 34px !important; width: auto !important; padding: 0 28px 0 8px !important; margin: 0 4px; }
.hr-app .custom-select { padding-right: 2rem; }
.hr-filter { width: auto; min-width: 210px; }
.hr-content table.dataTable { margin: 0 !important; width: 100% !important; }
.hr-content table.dataTable thead .sorting::before, .hr-content table.dataTable thead .sorting::after,
.hr-content table.dataTable thead .sorting_asc::before, .hr-content table.dataTable thead .sorting_asc::after,
.hr-content table.dataTable thead .sorting_desc::before, .hr-content table.dataTable thead .sorting_desc::after { bottom: .7em; font-size: .75em; }
.hr-content .pagination { margin: 0 !important; gap: 4px; }
.hr-content .page-link {
  border: 1px solid var(--hr-line); border-radius: var(--hr-radius-sm) !important; color: var(--hr-text);
  font-size: .85rem; padding: .3rem .65rem; min-width: 34px; text-align: center;
}
.hr-content .page-item.active .page-link { background: var(--hr-blue); border-color: var(--hr-blue); }
.hr-content .page-item.disabled .page-link { color: var(--hr-faint); }

/* legacy pages wrap tables in card > card-body > table-responsive; let the table touch the edges */
.hr-content .card-body > .table-responsive:only-child,
.hr-content .card-body.p-0 { margin: -20px; }
.hr-content .card-body > .table-responsive:only-child > .btn,
.hr-content .card-body > .table-responsive:only-child > a.btn { margin: 14px 0 0 16px; }

/* toolbar above legacy tables */
.hr-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }

/* ---------- alerts, modals, dropdowns ---------- */
.hr-app .alert { border-radius: var(--hr-radius); border: 1px solid transparent; font-size: .92rem; padding: 12px 16px; }
.hr-app .alert-success { background: var(--hr-green-50); border-color: #c7e9cf; color: #1a6c2f; }
.hr-app .alert-danger { background: var(--hr-red-50); border-color: #f2c9c9; color: #9c2b2b; }
.hr-app .alert-warning { background: var(--hr-amber-50); border-color: #f1dcb2; color: #855607; }
.hr-app .alert-info { background: var(--hr-blue-50); border-color: #c9def3; color: #144f86; }
.hr-app .alert .close { padding: 10px 14px; }
.hr-flash { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hr-flash .close { position: static; padding: 0 4px; font-size: 1.3rem; }
.hr-app .custom-control-label { display: inline-block; font-weight: 500; }
.hr-app .custom-control-input:checked ~ .custom-control-label::before { background: var(--hr-blue); border-color: var(--hr-blue); }
.hr-app input[type=file]::file-selector-button { border: 0; border-right: 1px solid var(--hr-line); background: var(--hr-surface-2); padding: 0 12px; margin: -6px 10px -6px -8px; height: 38px; font: inherit; font-weight: 600; color: var(--hr-text); }
.hr-app .modal-content { border: 0; border-radius: var(--hr-radius-lg); box-shadow: var(--hr-shadow-pop); }
.hr-app .modal-header { border-bottom: 1px solid var(--hr-line); padding: 16px 20px; }
.hr-app .modal-title { font-weight: 600; font-size: 1.05rem; }
.hr-app .modal-body { padding: 20px; }
.hr-app .modal-footer { border-top: 1px solid var(--hr-line); background: var(--hr-surface-2); border-radius: 0 0 var(--hr-radius-lg) var(--hr-radius-lg); }
.hr-app .modal-backdrop.show { opacity: .4; background: var(--hr-ink); }
.hr-app .dropdown-menu { border: 1px solid var(--hr-line); border-radius: var(--hr-radius); box-shadow: var(--hr-shadow-pop); padding: 6px; font-size: .9rem; min-width: 210px; }
.hr-app .dropdown-item { border-radius: var(--hr-radius-sm); padding: 7px 10px; color: var(--hr-text); }
.hr-app .dropdown-item:hover { background: var(--hr-surface-2); }
.hr-app .dropdown-item i { color: var(--hr-faint); }

/* old SB Admin bits that may still be in page markup */
.hr-content .breadcrumb, .scroll-to-top, #logoutModal { display: none !important; }
.hr-content .card-body-icon { display: none; }
.hr-content hr { border-color: var(--hr-line); }

/* Bootstrap 5 classes used on a few older pages */
.me-1 { margin-right: .25rem !important; } .me-2 { margin-right: .5rem !important; } .me-3 { margin-right: 1rem !important; }
.ms-1 { margin-left: .25rem !important; } .ms-2 { margin-left: .5rem !important; } .ms-auto { margin-left: auto !important; }
.fw-bold { font-weight: 600 !important; } .fw-semibold { font-weight: 600 !important; } .fw-normal { font-weight: 400 !important; }
.g-3 { margin: -.5rem; } .g-3 > * { padding: .5rem; }
.btn-close { background: transparent; border: 0; width: 32px; height: 32px; opacity: .6; }
.btn-close::before { content: "\00d7"; font-size: 1.5rem; line-height: 1; }

/* ---------- employee profile ---------- */
.hr-profile-head { display: flex; gap: 18px; align-items: center; padding: 22px 24px; }
.hr-profile-head h2 { margin: 0; font-size: 1.35rem; }
.hr-profile-head p { margin: 4px 0 0; color: var(--hr-muted); }
.hr-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin: 0; }
.hr-dl > div { padding: 12px 20px; border-top: 1px solid var(--hr-line); }
.hr-dl dt { font-size: .8rem; font-weight: 500; color: var(--hr-muted); margin-bottom: 2px; }
.hr-dl dd { margin: 0; font-size: .93rem; font-weight: 500; overflow-wrap: anywhere; }

/* payroll form */
.hr-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hr-pay-total {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 20px; border-radius: var(--hr-radius-lg); background: var(--hr-ink); color: #c4d1de;
}
.hr-pay-total strong { font-size: 1.9rem; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.hr-sum-row { display: flex; justify-content: space-between; padding-top: 12px; margin-top: 4px; border-top: 1px dashed var(--hr-line-strong); font-weight: 600; }
.hr-money-input { position: relative; }
.hr-money-input::before { content: "$"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--hr-faint); font-size: .9rem; }
.hr-money-input .form-control { padding-left: 24px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- sign in ---------- */
body.hr-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
/* pin the two panels so stray output (PHP notices, extension elements) cannot push the form to a new row */
body.hr-auth > .hr-auth-side { grid-column: 1; grid-row: 1; }
body.hr-auth > .hr-auth-main { grid-column: 2; grid-row: 1; min-height: 100vh; }
body.hr-auth > :not(.hr-auth-side):not(.hr-auth-main) { position: absolute; }
.hr-auth-side {
  position: relative; overflow: hidden; background: var(--hr-ink); color: #c4d1de;
  padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between;
}
.hr-auth-side .hr-brand { padding: 0; }
.hr-auth-quote { max-width: 440px; }
.hr-auth-quote h1 { color: #fff; font-size: 2.3rem; line-height: 1.12; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 16px; }
.hr-auth-quote p { font-size: 1rem; color: #9fb3c7; margin: 0; max-width: 380px; }
.hr-auth-roster { display: grid; gap: 10px; max-width: 420px; }
.hr-auth-roster div {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--hr-radius-lg);
  font-size: .9rem;
}
.hr-auth-roster div span:last-child { margin-left: auto; color: #9fb3c7; font-size: .82rem; }
.hr-auth-roster .hr-avatar { width: 30px; height: 30px; font-size: .72rem; }
.hr-auth-side small { color: #5f7790; }
.hr-auth-main { display: grid; place-items: center; padding: 40px 24px; background: var(--hr-surface); }
.hr-auth-form { width: 100%; max-width: 380px; }
.hr-auth-form h2 { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; }
.hr-auth-form > p { color: var(--hr-muted); margin: 0 0 26px; }
.hr-auth-form .form-control { height: 46px; font-size: 1rem; }
.hr-auth-form .btn { height: 46px; font-size: 1rem; }
.hr-pw { position: relative; }
.hr-pw .form-control { padding-right: 46px; }
.hr-pw button { position: absolute; right: 4px; top: 4px; width: 38px; height: 38px; border: 0; background: transparent; color: var(--hr-faint); border-radius: var(--hr-radius-sm); }
.hr-pw button:hover { color: var(--hr-text); }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
  .hr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-payband { grid-template-columns: 1fr; }
  .hr-payband-sum { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
}
@media (max-width: 991.98px) {
  .hr-main-col { margin-left: 0; }
  .hr-sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--hr-shadow-pop); }
  .hr-nav-open .hr-sidebar { transform: none; }
  .hr-scrim { position: fixed; inset: 0; z-index: 1030; background: rgba(15, 34, 51, .45); display: none; }
  .hr-nav-open .hr-scrim { display: block; }
  .hr-nav-toggle { display: inline-grid; }
  .hr-topbar { padding: 0 16px; gap: 8px; }
  .hr-content { padding: 18px 16px 32px; }
  .hr-footer { padding: 16px; }
  .hr-search kbd, .hr-user-text, .hr-caret { display: none; }
  .hr-pay-grid { grid-template-columns: 1fr; }
  body.hr-auth { grid-template-columns: 1fr; }
  body.hr-auth > .hr-auth-main { grid-column: 1; }
  .hr-auth-side { display: none; }
}
@media (max-width: 575.98px) {
  .hr-kpis { grid-template-columns: 1fr; }
  .hr-page-title { font-size: 1.4rem; }
  .hr-content .dataTables_filter input { width: 100% !important; margin-left: 0 !important; }
  .hr-content .dataTables_wrapper .row:first-child > div { text-align: left !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .hr-sidebar, .hr-topbar, .hr-footer, .hr-page-actions, .dataTables_length, .dataTables_filter, .dataTables_paginate { display: none !important; }
  .hr-main-col { margin: 0; }
  body.hr-app { background: #fff; }
}

/* =====================================================================
   Older pages (wrapped in .hr-legacy by the migration)
   ===================================================================== */
.hr-legacy > .container-fluid,
.hr-legacy .container-fluid .container-fluid { padding: 0; }
/* their own big page headings duplicate the page title — make them quiet section headings */
.hr-legacy h1, .hr-legacy h2, .hr-legacy h3, .hr-legacy center > h2, .hr-legacy center > h1 {
  font-size: 1rem !important; font-weight: 600; text-align: left; margin: 0 0 14px; color: var(--hr-muted);
  letter-spacing: 0;
}
.hr-legacy .card-header h1, .hr-legacy .card-header h2, .hr-legacy .card-header h3 { margin: 0; color: var(--hr-text); }
.hr-legacy center { text-align: left; }
.hr-legacy > br, .hr-legacy > .container-fluid > br:first-child { display: none; }
/* forms that sit straight on the page get a panel */
.hr-legacy form:not(.card form):not(.modal form):not(.d-inline):not(:has(table)) {
  background: var(--hr-surface); border: 1px solid var(--hr-line); border-radius: var(--hr-radius-lg);
  padding: 22px; margin-bottom: 20px;
}
/* legacy pattern: <input> then <label> — show the label above the field */
.hr-legacy .form-outline, .hr-legacy .form-group { display: flex; flex-direction: column; }
.hr-legacy .form-outline > label, .hr-legacy .form-outline > .form-label { order: -1; }
.hr-legacy .form-outline:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; gap: 8px; }
.hr-legacy .form-outline:has(> input[type="checkbox"]) > label { order: 1; margin: 0; }
.hr-legacy .form-control-lg { height: 40px; font-size: .93rem; padding: .45rem .8rem; border-radius: var(--hr-radius); }
.hr-legacy .form-row { margin-left: -9px; margin-right: -9px; }
.hr-legacy .form-row > [class*="col"] { padding-left: 9px; padding-right: 9px; margin-bottom: 14px; }
.hr-legacy .form-row.mb-4, .hr-legacy .form-row.mb-3 { margin-bottom: 4px !important; }
/* coloured cells and the old card header icon */
.hr-legacy td[bgcolor] { background: transparent !important; }
.hr-legacy td[bgcolor] a { display: inline-block; padding: .28rem .65rem; border-radius: var(--hr-radius-sm); font-size: .8rem; font-weight: 600; text-decoration: none; }
.hr-legacy td[bgcolor="pink"] a { background: var(--hr-red-50); color: var(--hr-red); border: 1px solid #f2c9c9; }
.hr-legacy td[bgcolor="skyblue"] a, .hr-legacy td[bgcolor="skyblue"] button { background: var(--hr-blue-50); color: var(--hr-blue-700); border: 1px solid #c9def3; }
.hr-legacy .card-header > .fas.fa-table:first-child, .hr-legacy .card-header > .fa-table { display: none; }
.hr-legacy > .fa-tasks, .hr-legacy > i.fa:first-child { display: none; }
.hr-legacy .card { margin-bottom: 20px; }
.hr-legacy .card-header { font-weight: 600; }
.hr-legacy .card-body > form > .table, .hr-legacy .table-responsive > form { margin: 0; }
.hr-legacy p > u { text-decoration: none; font-weight: 600; color: var(--hr-muted); }
.hr-legacy .alert center, .hr-legacy .alert font { text-align: left; color: inherit !important; }
.hr-legacy td[style*="background"], .hr-legacy th[style*="background"] { background: transparent !important; }
.hr-legacy .card-body > .table-responsive { margin: -20px; }
.hr-legacy .card-body > .table-responsive > form { margin: 0; padding: 0; border: 0; background: none; }
.hr-kpi.is-selected { border-color: var(--hr-blue); box-shadow: 0 0 0 1px var(--hr-blue) inset; }
/* training status selects */
.hr-skill { min-width: 118px; height: 32px !important; font-size: .82rem !important; font-weight: 600; }
.hr-skill.is-yes { background-color: var(--hr-green-50) !important; color: var(--hr-green-700) !important; border-color: #c7e9cf !important; }
.hr-skill.is-scheduled { background-color: var(--hr-blue-50) !important; color: var(--hr-blue-700) !important; border-color: #c9def3 !important; }
.hr-skill.is-pending { background-color: var(--hr-amber-50) !important; color: var(--hr-amber) !important; border-color: #f1dcb2 !important; }
.hr-skill.is-no { background-color: var(--hr-red-50) !important; color: var(--hr-red) !important; border-color: #f2c9c9 !important; }
.hr-skill.is-na, .hr-skill.is-none { color: var(--hr-muted) !important; }
/* dashboard: deltas, donut, callout */
.hr-delta { display: inline-flex; align-items: center; gap: 3px; font-size: .8rem; font-weight: 600; color: #9fb3c7; white-space: nowrap; }
.hr-delta.is-good { color: #5fd17a; }
.hr-delta.is-bad { color: #ff9a8a; }
.hr-payband-split .hr-delta { margin-left: 4px; }
.hr-dark-select { background-color: var(--hr-ink-2) !important; color: #e6eef6 !important; border-color: #2a4762 !important; min-width: 150px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%239fb3c7' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important; }
.hr-donut-wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hr-donut { position: relative; width: 180px; height: 180px; flex: none; }
.hr-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.hr-donut-center strong { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.hr-donut-center span { font-size: .78rem; color: var(--hr-muted); }
.hr-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 220px; }
.hr-legend li { display: grid; grid-template-columns: 12px 1fr auto 52px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hr-line); font-size: .9rem; }
.hr-legend li:first-child { border-top: 0; }
.hr-legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.hr-legend-val { font-weight: 600; }
.hr-legend-pct { color: var(--hr-muted); text-align: right; font-size: .84rem; }
.hr-callout { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: var(--hr-radius);
  background: var(--hr-amber-50); color: #6b4a08; font-size: .87rem; }
.hr-callout > i { color: var(--hr-amber); font-size: 1.05rem; }
.hr-callout > span { flex: 1; }
.hr-callout > a { font-weight: 600; color: var(--hr-amber); white-space: nowrap; }
.hr-row-eq > [class*="col-"] { display: flex; flex-direction: column; }
.hr-row-eq > [class*="col-"] > .hr-panel { flex: 1; }
.hr-row-eq > [class*="col-"] > .hr-panel > .hr-empty { padding-top: 40px; }
/* employee status bar */
.hr-kpi-of { font-size: .95rem; font-weight: 500; color: var(--hr-faint); letter-spacing: 0; }
.hr-kpi-of.is-over { color: var(--hr-red); }
.hr-segbar { display: flex; gap: 3px; height: 8px; margin-top: 12px; }
.hr-segbar span { border-radius: 99px; min-width: 0; }
.hr-segbar span[style="width:0%"] { display: none; }
.is-in { background: var(--hr-blue); } .is-away { background: var(--hr-teal); } .is-ended { background: #e3a13b; }
.hr-seglegend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: .8rem; color: var(--hr-muted); }
.hr-seglegend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
/* things to do */
.hr-todo li { padding: 0; }
.hr-todo a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 20px; color: inherit; text-decoration: none !important; }
.hr-todo a:hover { background: var(--hr-surface-2); }
.hr-todo .hr-kpi-icon.is-red { background: var(--hr-red-50); color: var(--hr-red); }
.hr-todo-go { font-size: .7rem; color: var(--hr-faint); }
/* collapsible sidebar */
.hr-sidebar { position: fixed; }
.hr-collapse-btn {
  position: absolute; top: 22px; right: 12px; width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .1); background: transparent; color: #7d93a8; font-size: .8rem;
  display: grid; place-items: center;
}
.hr-collapse-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
@media (min-width: 992px) {
  .hr-sidebar, .hr-main-col { transition: width .18s ease, margin-left .18s ease; }
  body.hr-collapsed { --hr-sidebar-w: 76px; }
  .hr-collapsed .hr-brand { padding: 20px 0 14px; justify-content: center; }
  .hr-collapsed .hr-brand-text, .hr-collapsed .hr-company-name, .hr-collapsed .hr-nav-label,
  .hr-collapsed .hr-nav-link span, .hr-collapsed .hr-vendor { display: none; }
  .hr-collapsed .hr-company { justify-content: center; margin: 4px 12px 14px; padding: 10px 0; }
  .hr-collapsed .hr-nav { padding: 0 10px 12px; }
  .hr-collapsed .hr-nav-group { margin-bottom: 10px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .06); }
  .hr-collapsed .hr-nav-group:first-child { border-top: 0; }
  .hr-collapsed .hr-nav-link { justify-content: center; padding: 10px 0; }
  .hr-collapsed .hr-nav-link i { font-size: 1rem; }
  .hr-collapsed .hr-collapse-btn { position: static; margin: 0 auto 12px; transform: rotate(180deg); }
}
@media (max-width: 991.98px) { .hr-collapse-btn { display: none; } }

/* =====================================================================
   Phase 2 — dashboard, directory, profile, employee form
   ===================================================================== */
.hr-kpi .hr-delta { color: var(--hr-muted); font-size: .78rem; vertical-align: middle; }
.hr-kpi .hr-delta.is-good { color: var(--hr-green-700); }
.hr-kpi .hr-delta.is-bad { color: var(--hr-red); }
.hr-kpi-icon.is-red { background: var(--hr-red-50); color: var(--hr-red); }
.hr-kpi-trio { display: flex; gap: 18px; margin-top: 12px; }
.hr-kpi-trio > span { display: flex; flex-direction: column; font-size: .8rem; color: var(--hr-muted); line-height: 1.2; }
.hr-kpi-trio strong { font-size: 1.55rem; font-weight: 600; color: var(--hr-text); letter-spacing: -0.02em; }
.hr-kpi-trio strong.text-danger { color: var(--hr-red) !important; }

/* month picker in the page header */
.hr-period { display: flex; align-items: center; gap: 8px; margin: 0; }
.hr-period label { margin: 0; color: var(--hr-muted); }
.hr-period .custom-select { width: auto; min-width: 190px; }

/* workforce distribution */
.hr-dist { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 28px; }
.hr-app .hr-dist-title { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--hr-muted); margin: 0 0 4px; }
.hr-list.is-compact li { padding: 9px 0; border-top: 0; }
.hr-dist-link { color: inherit; text-decoration: none; }
.hr-dist-link:hover span:first-child { color: var(--hr-blue); text-decoration: underline; }

/* list helpers */
.hr-app .hr-list-title { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 12px 20px 6px;
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--hr-muted); }
.hr-list-title span { font-variant-numeric: tabular-nums; }
.hr-list-empty { margin: 0; padding: 4px 20px 14px; color: var(--hr-muted); font-size: .88rem; }
.hr-list-more { display: block; padding: 10px 20px; border-top: 1px solid var(--hr-line); font-size: .85rem; font-weight: 500; }
.hr-list .hr-list-main a { color: inherit; }
.hr-list .hr-list-main a:hover strong { color: var(--hr-blue); text-decoration: underline; }

/* tabs (dashboard contracts card, employee profile) */
.hr-tabs { display: flex; flex-wrap: nowrap; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--hr-line); overflow-x: auto; scrollbar-width: thin; }
.hr-tabs .nav-link { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 11px 12px; margin-bottom: -1px;
  color: var(--hr-muted); font-weight: 500; font-size: .9rem; border-bottom: 2px solid transparent; border-radius: 0; }
.hr-tabs .nav-link:hover { color: var(--hr-text); }
.hr-tabs .nav-link.active { color: var(--hr-blue-700); border-bottom-color: var(--hr-blue); }
.hr-tabs .nav-link i { font-size: .85rem; opacity: .8; }
.hr-tabs.is-small .nav-link { padding: 9px 10px; font-size: .84rem; }
.hr-tab-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--hr-surface-2); border: 1px solid var(--hr-line);
  font-size: .74rem; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; color: var(--hr-muted); }
.hr-tabs .nav-link.active .hr-tab-count { background: var(--hr-blue-50); border-color: transparent; color: var(--hr-blue-700); }

/* activity */
.hr-activity li { align-items: flex-start; }
.hr-activity .hr-list-main strong { white-space: normal; font-weight: 500; font-size: .88rem; }
.hr-activity-dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--hr-faint); }
.hr-activity-dot.is-create, .hr-activity-dot.is-payroll_run, .hr-activity-dot.is-pay { background: var(--hr-green); }
.hr-activity-dot.is-update, .hr-activity-dot.is-upload { background: var(--hr-blue); }
.hr-activity-dot.is-delete, .hr-activity-dot.is-cancel, .hr-activity-dot.is-retire { background: var(--hr-red); }
.hr-activity-dot.is-export { background: var(--hr-amber); }

/* shortcuts */
.hr-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.hr-shortcuts a { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--hr-line); border-radius: var(--hr-radius);
  color: var(--hr-text); font-weight: 500; font-size: .88rem; text-decoration: none; background: var(--hr-surface); transition: border-color .15s, background .15s; }
.hr-shortcuts a i { color: var(--hr-blue); font-size: 1rem; }
.hr-shortcuts a:hover { border-color: var(--hr-blue); background: var(--hr-blue-50); }

/* masked values */
.hr-masked { font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--hr-muted); }

/* directory */
.hr-dir-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hr-line); margin: 0; }
.hr-dir-search { position: relative; flex: 1 1 280px; min-width: 220px; display: flex; gap: 8px; }
.hr-dir-search .form-control { flex: 1; min-width: 0; }
.hr-dir-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--hr-faint); font-size: .85rem; pointer-events: none; }
.hr-dir-search .form-control { padding-left: 34px; }
.hr-dir-selects { display: flex; flex-wrap: wrap; gap: 8px; }
.hr-dir-selects .custom-select { width: auto; min-width: 150px; max-width: 220px; }
.hr-dir-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--hr-line); }
.hr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: var(--hr-blue-50);
  color: var(--hr-blue-700); font-size: .82rem; font-weight: 500; text-decoration: none; }
.hr-chip:hover { text-decoration: none; background: #d9e9f9; }
.hr-dir-table img.hr-avatar { object-fit: cover; }
.hr-dir-table td { vertical-align: middle; }
.hr-dir-table .hr-pill + .hr-pill { margin-left: 4px; }
.hr-sort { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; white-space: nowrap; }
.hr-sort i { font-size: .72rem; opacity: .35; }
.hr-sort.is-on i, .hr-sort:hover i { opacity: .9; }
.hr-sort:hover { color: var(--hr-blue); text-decoration: none; }
.hr-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--hr-line); }
.hr-pager .page-link { color: var(--hr-blue-700); border-color: var(--hr-line); min-width: 32px; text-align: center; }
.hr-pager .page-item.active .page-link { background: var(--hr-blue); border-color: var(--hr-blue); color: #fff; }

/* profile */
.hr-profile .hr-profile-head p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hr-tabs-wrap { border-top: 1px solid var(--hr-line); }
.hr-dl > .is-wide { grid-column: 1 / -1; }
.hr-panel-note { margin: 0; padding: 12px 20px; border-top: 1px solid var(--hr-line); font-size: .85rem; color: var(--hr-muted); }
.hr-callout.is-amber { background: var(--hr-amber-50); border-color: transparent; }
.hr-callout.is-amber > i { color: var(--hr-amber); }
.hr-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hr-chips li { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--hr-line); border-radius: var(--hr-radius); min-width: 120px; }
.hr-chips li span { font-size: .78rem; color: var(--hr-muted); }
.hr-skill-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 24px; }
.hr-skill-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hr-line); }

/* employee form */
.hr-form-steps { display: flex; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--hr-line); overflow-x: auto; position: sticky; top: 0; z-index: 3; background: var(--hr-surface); border-radius: var(--hr-radius-lg) var(--hr-radius-lg) 0 0; }
.hr-form-steps a { padding: 6px 10px; border-radius: var(--hr-radius-sm); color: var(--hr-muted); font-size: .85rem; font-weight: 500; white-space: nowrap; }
.hr-form-steps a:hover { background: var(--hr-surface-2); color: var(--hr-text); text-decoration: none; }
fieldset.hr-form-section { margin: 0; min-width: 0; scroll-margin-top: 60px; }
fieldset.hr-form-section > legend { display: flex; align-items: center; gap: 10px; float: left; width: 100%; font-size: 1rem; font-weight: 600; margin: 0 0 4px; padding: 0; }
fieldset.hr-form-section > legend + * { clear: both; }
fieldset.hr-form-section > p { margin: 0 0 16px; color: var(--hr-muted); font-size: .88rem; }
.hr-step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--hr-blue-50); color: var(--hr-blue-700); font-size: .78rem; font-weight: 600; }
.hr-req { color: var(--hr-red); font-weight: 600; }
.hr-photo-field { display: flex; align-items: center; gap: 16px; }
.hr-emp-form .invalid-feedback { display: block; }
.hr-emp-form .form-control[readonly] { background: var(--hr-surface-2); color: var(--hr-muted); }
.hr-emp-form #form-errors a { color: inherit; text-decoration: underline; }

@media (max-width: 991.98px) {
  .hr-hide-md { display: none !important; }
}
@media (max-width: 767.98px) {
  .hr-hide-sm { display: none !important; }
  .hr-show-sm { display: block !important; }
  .hr-dir-selects { width: 100%; }
  .hr-dir-selects .custom-select { flex: 1 1 140px; max-width: none; }
  .hr-period .custom-select { min-width: 0; }
  .hr-pager { justify-content: center; }
  .hr-kpi-trio { gap: 14px; }
}

.hr-chart-box { position: relative; height: 220px; }
.hr-show-sm { display: none; }

/* dashboard: payroll gets its own section below the people panels */
.hr-section-title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; margin: 12px 0 14px; padding-top: 18px; border-top: 1px solid var(--hr-line); }

/* =====================================================================
   Dashboard v3 (DORA-inspired): headline cards, gauge, sparkline,
   team table, to-do cards, leave notes, area chart.
   ===================================================================== */
.hr-d-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.hr-d-card, .hr-d-panel {
  background: var(--hr-surface); border: 1px solid var(--hr-line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 34, 51, .04);
}
.hr-d-card { padding: 20px 22px; display: flex; flex-direction: column; min-width: 0; }
.hr-d-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.hr-d-card header h2 { font-size: 1rem; font-weight: 600; color: var(--hr-muted); margin: 0; letter-spacing: 0; }
.hr-d-more { font-size: .82rem; font-weight: 600; }
.hr-d-figure { font-size: 2.15rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.hr-d-figure .hr-delta { font-size: .78rem; letter-spacing: 0; }
.hr-d-of { flex-basis: 100%; font-size: .82rem; font-weight: 400; letter-spacing: 0; color: var(--hr-muted); }
.hr-d-of.is-over { color: var(--hr-red); }
.hr-d-chip { font-size: .72rem; font-weight: 600; letter-spacing: 0; padding: 3px 8px; border-radius: 6px; background: var(--hr-blue-50); color: var(--hr-blue-700); }
.hr-d-chip.is-green { background: var(--hr-green-50); color: var(--hr-green-700); }
.hr-d-bar { display: flex; gap: 4px; height: 8px; margin: 18px 0 12px; }
.hr-d-bar span { border-radius: 99px; min-width: 0; }
.hr-d-bar span[style*="width:0%"] { display: none; }
.hr-d-legend { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; color: var(--hr-muted); }
.hr-d-legend a { color: inherit; }
.hr-d-legend a:hover { color: var(--hr-text); text-decoration: none; }
.hr-d-legend i, .hr-d-rows i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.hr-d-legend b { color: var(--hr-text); font-weight: 600; margin-left: 2px; }
.hr-d-legend.is-stack { flex-direction: column; flex-wrap: nowrap; margin: 0; gap: 9px; }
.hr-d-note { color: var(--hr-muted); font-size: .9rem; margin: 6px 0 0; }

.hr-d-gauge-wrap { display: flex; align-items: center; gap: 18px; flex: 1; }
.hr-d-gauge { width: 172px; max-width: 55%; flex-shrink: 0; overflow: visible; }
.hr-d-gauge-num { font-size: 34px; font-weight: 600; fill: var(--hr-text); letter-spacing: -1px; font-family: var(--hr-font); }
.hr-d-gauge-sub { font-size: 11px; fill: var(--hr-muted); font-family: var(--hr-font); }

.hr-d-spark { display: flex; align-items: flex-end; gap: 8px; height: 74px; margin-top: auto; padding-top: 14px; }
.hr-d-spark a { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-decoration: none; }
.hr-d-spark span { display: block; border-radius: 5px 5px 2px 2px; background: #dbe7f6; transition: background .15s; }
.hr-d-spark a:hover span { background: #a9c6ec; }
.hr-d-spark a.is-on span { background: var(--hr-blue); }
.hr-d-spark small { display: block; text-align: center; font-size: .7rem; color: var(--hr-faint); margin-top: 5px; }
.hr-d-spark a.is-on small { color: var(--hr-text); font-weight: 600; }

.hr-d-panel { margin-bottom: 20px; overflow: hidden; }
.hr-d-panel .hr-panel-head { border-bottom: 0; padding: 18px 22px 8px; }
.hr-d-panel .hr-panel-head h2 { font-size: 1.08rem; font-weight: 600; }
.hr-d-panel .hr-panel-body { padding: 10px 22px 20px; }
.hr-row-eq > [class*="col-"] > .hr-d-panel { height: calc(100% - 20px); }

.hr-d-table th { font-size: .8rem; font-weight: 500; color: var(--hr-muted); text-transform: none; letter-spacing: 0; border-top: 0; border-bottom: 1px solid var(--hr-line); padding: 10px 22px; background: transparent; }
.hr-d-table td { padding: 13px 22px; vertical-align: middle; border-top: 1px solid var(--hr-line); }
.hr-d-table tbody tr:first-child td { border-top: 0; }
.hr-d-table .hr-avatar { width: 38px; height: 38px; object-fit: cover; }
.hr-d-strong { display: block; font-weight: 500; }
.hr-d-sub { display: block; font-size: .8rem; color: var(--hr-muted); }
.hr-d-status { display: block; font-weight: 600; font-size: .9rem; }
.hr-d-status.is-green { color: var(--hr-green-700); }
.hr-d-status.is-amber { color: #d4880f; }
.hr-d-status.is-red { color: var(--hr-red); }
.hr-d-view { border: 1px solid var(--hr-line-strong); background: var(--hr-surface); white-space: nowrap; }
.hr-d-view i { margin-right: 6px; }

.hr-d-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hr-d-todo a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hr-line); border-radius: 12px; color: var(--hr-text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.hr-d-todo a:hover { border-color: var(--hr-line-strong); box-shadow: 0 4px 12px -6px rgba(15, 34, 51, .18); }
.hr-d-todo-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--hr-blue-50); color: var(--hr-blue); }
.hr-d-todo .is-red .hr-d-todo-icon { background: var(--hr-red-50); color: var(--hr-red); }
.hr-d-todo .is-amber .hr-d-todo-icon { background: var(--hr-amber-50); color: var(--hr-amber); }
.hr-d-todo-main { flex: 1; min-width: 0; }
.hr-d-todo-main strong { display: block; font-size: .9rem; font-weight: 600; }
.hr-d-todo-main span { display: block; font-size: .8rem; color: var(--hr-muted); }
.hr-d-todo-count { font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 6px; background: var(--hr-blue-50); color: var(--hr-blue-700); }
.hr-d-todo .is-red .hr-d-todo-count { background: var(--hr-red-50); color: var(--hr-red); }
.hr-d-todo .is-amber .hr-d-todo-count { background: var(--hr-amber-50); color: var(--hr-amber); }
.hr-d-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--hr-line); }
.hr-d-quick a { font-size: .78rem; font-weight: 500; padding: 5px 10px; border-radius: 99px; background: var(--hr-surface-2); border: 1px solid var(--hr-line); color: var(--hr-text); text-decoration: none; }
.hr-d-quick a:hover { border-color: var(--hr-blue); color: var(--hr-blue); }
.hr-d-quick i { margin-right: 5px; color: var(--hr-muted); }

.hr-d-label { display: flex; justify-content: space-between; font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--hr-muted); margin: 6px 0 10px; }
.hr-d-label:not(:first-child) { margin-top: 18px; }
.hr-d-label-sm { display: block; font-size: .8rem; color: var(--hr-muted); margin-bottom: 4px; }
.hr-d-empty-line { font-size: .88rem; color: var(--hr-muted); margin: 0; }
.hr-d-note-card { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 11px 14px; margin-bottom: 8px; border-radius: 10px; background: #f6f8fb; border-left: 3px solid #13a3a3; color: var(--hr-text); text-decoration: none; }
.hr-d-note-card.is-blue { border-left-color: #8fb3f5; }
.hr-d-note-card:hover { background: #eef3f9; text-decoration: none; color: var(--hr-text); }
.hr-d-note-card strong { font-size: .9rem; font-weight: 600; }
.hr-d-note-text, .hr-d-note-meta { grid-column: 1 / -1; font-size: .8rem; color: var(--hr-muted); }
.hr-d-note-meta i { margin-right: 4px; }
.hr-d-badge { font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; align-self: start; }
.hr-d-badge.is-teal { background: var(--hr-teal-50); color: var(--hr-teal); }
.hr-d-badge.is-blue { background: var(--hr-blue-50); color: var(--hr-blue-700); }

.hr-d-chart { position: relative; height: 290px; }
.hr-d-foot { font-size: .78rem; color: var(--hr-faint); margin: 12px 0; }
.hr-d-rows { list-style: none; margin: 0; padding: 0; }
.hr-d-rows li { display: flex; align-items: center; padding: 6px 0; font-size: .86rem; color: var(--hr-muted); }
.hr-d-rows b { margin-left: auto; color: var(--hr-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.hr-d-rows li.is-total { border-top: 1px solid var(--hr-line); margin-top: 4px; padding-top: 10px; color: var(--hr-text); font-weight: 600; }
.hr-d-wage { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--hr-line); }
.hr-d-wage strong { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }

@media (max-width: 1199.98px) {
  .hr-d-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-d-cards > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .hr-d-cards { grid-template-columns: 1fr; }
  .hr-d-table th:nth-child(2), .hr-d-table td:nth-child(2) { display: none; }
  .hr-d-table th, .hr-d-table td { padding-left: 14px; padding-right: 14px; }
  .hr-d-view { padding: 4px 8px; font-size: 0; }
  .hr-d-view i { margin: 0; font-size: .9rem; }
  .hr-d-chart { height: 220px; }
}
.hr-app .hr-d-label { font-size: .74rem; line-height: 1.4; }
.hr-d-legend.is-stack li { white-space: nowrap; }
.hr-d-gauge { width: 150px; }
.hr-content .hr-d-table thead th { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 500; }
@media (max-width: 767.98px) {
  .hr-content .hr-d-view { padding: 6px 9px; font-size: 0; }
  .hr-content .hr-d-view i { margin: 0; font-size: .95rem; }
  .hr-d-table td:nth-child(3) .hr-d-sub { display: none; }
}

/* ---------- payroll (Phase 3) ---------- */
.hr-pay-table th, .hr-pay-table td { white-space: nowrap; }
.hr-pay-table td:first-child { white-space: normal; min-width: 180px; }
.hr-content .hr-tfoot th { background: var(--hr-surface-2); border-top: 2px solid var(--hr-line-strong); font-weight: 600; }
.hr-slip-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 4px 0 18px; border-bottom: 1px solid var(--hr-line); margin-bottom: 18px; }
.hr-slip-meta strong { display: block; font-weight: 600; }
.hr-slip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; }
.hr-slip-table { margin: 0; }
.hr-content .hr-slip-table th { background: var(--hr-surface-2); font-size: .82rem; text-transform: none; letter-spacing: 0; }
.hr-slip-table td { padding: 8px 12px; }
.hr-slip-table tr.is-zero td { color: var(--hr-faint); }
.hr-content .hr-slip-table tfoot th { background: transparent; border-top: 2px solid var(--hr-text); font-size: .92rem; }
@media (max-width: 767.98px) {
  .hr-slip-meta, .hr-slip-cols { grid-template-columns: 1fr; }
}
.hr-content .hr-pay-table { font-size: .86rem; }
.hr-content .hr-pay-table th, .hr-content .hr-pay-table td { padding-left: 10px; padding-right: 10px; }
.hr-slip-cols { align-items: start; }

/* ---------- pay currency (PAYE update) ---------- */
.hr-money-input.is-zwg::before { content: "ZWG"; font-size: .72rem; }
.hr-money-input.is-zwg .form-control { padding-left: 42px; }
[data-paye-info] { color: var(--hr-muted); }

/* ---------- leave applications and self-service (Phase 4) ---------- */
.hr-decide { display: grid; gap: 6px; min-width: 230px; margin: 0; }
.hr-decide .form-control-sm { font-size: .8rem; }

/* ---------- Phase 6: notifications, reports, documents ---------- */
.hr-bell { position: relative; }
.hr-bell-count { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--hr-red); color: #fff; font-size: .68rem; font-weight: 600; line-height: 17px; text-align: center; font-style: normal; }
.hr-dot-new { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--hr-blue); vertical-align: middle; }
.hr-section-title { margin: 6px 0 12px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hr-muted); }
a.hr-kpi .hr-kpi-meta { line-height: 1.4; }

/* Users & settings table: keep names and their details on one line, controls compact */
.hr-users-table td, .hr-users-table th { vertical-align: middle; }
.hr-users-table td:first-child { min-width: 230px; }
.hr-users-table .hr-person-name, .hr-users-table .hr-person-sub { white-space: nowrap; }
.hr-users-table .custom-select-sm { min-width: 150px; max-width: 220px; }
.hr-users-table td:last-child { white-space: nowrap; }