/* -------------------------------------------------------
   HR recruitment: restrained, corporate presentation.
   Scoped to `.hr-ui`, the root element of each recruitment page.
   Builds on the CountrySuite tokens in styles.css and quietens the
   pill, circle and heavy-shadow utility classes the pages were built with.
------------------------------------------------------- */
.hr-ui {
  --hr-radius: 6px;
  --hr-radius-sm: 4px;
  --hr-line: var(--cs-border, #d9e0dc);
  --hr-line-strong: var(--cs-border-strong, #bdc9c4);
  --hr-ink: var(--cs-text, #14221f);
  --hr-muted: var(--cs-muted, #5d6c68);
  --hr-accent: var(--cs-primary, #123b36);
  --hr-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --hr-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  color: var(--hr-ink);
  font-family: var(--hr-sans);
  font-size: .95rem;
  line-height: 1.5;
  background: transparent;
}

/* Page titles */
.hr-ui h1,
.hr-ui h2,
.hr-ui h3,
.hr-ui h4,
.hr-ui h5,
.hr-ui .staffing-form-title {
  font-family: var(--hr-serif);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--hr-accent);
}

.hr-ui h4 { font-size: 1.3rem; line-height: 1.3; }
.hr-ui h5 { font-size: 1.05rem; }
.hr-ui h6 { font-weight: 700; color: var(--hr-ink); }

.hr-ui > .d-flex:first-of-type h4,
.hr-ui > div > .d-flex:first-child h4 {
  padding-bottom: .15rem;
}

.hr-ui .fw-bold { font-weight: 700 !important; }
.hr-ui .fw-semibold { font-weight: 600 !important; }
.hr-ui .text-muted,
.hr-ui .small.text-muted { color: var(--hr-muted) !important; }

/* Squares, not pills or circles */
.hr-ui .rounded-pill,
.hr-ui .rounded-circle,
.hr-ui .rounded-4,
.hr-ui .rounded-3,
.hr-ui .rounded-2 {
  border-radius: var(--hr-radius) !important;
}

.hr-ui .badge.rounded-pill,
.hr-ui .badge {
  border-radius: var(--hr-radius-sm) !important;
}

.hr-ui .shadow,
.hr-ui .shadow-sm,
.hr-ui .shadow-lg {
  box-shadow: none !important;
}

/* Panels */
.hr-ui .card,
.hr-ui .staffing-form-panel,
.hr-ui .list-group-item {
  background: #fff;
  border: 1px solid var(--hr-line) !important;
  border-radius: var(--hr-radius) !important;
  box-shadow: 0 1px 2px rgba(9, 43, 40, .05) !important;
}

.hr-ui .card-header,
.hr-ui .card-footer {
  background: var(--cs-surface-soft, #f7f9f6) !important;
  border-color: var(--hr-line) !important;
  font-weight: 600;
}

.hr-ui .card-body { padding: 1.1rem 1.25rem; }

.hr-ui .staffing-form-workspace,
.hr-ui.staffing-form-workspace,
.hr-ui.recruitment-workspace,
.hr-ui.recruitment-form-workspace,
.hr-ui.vacancy-form-workspace {
  background: transparent;
  color: var(--hr-ink);
}

.hr-ui .staffing-form-kicker,
.hr-ui .staffing-section-title {
  color: var(--hr-muted);
  font-family: var(--hr-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hr-ui .staffing-section-title {
  border-bottom: 1px solid var(--hr-line);
  padding-bottom: .4rem;
  margin-bottom: .85rem;
}

.hr-ui .staffing-panel-icon {
  background: var(--hr-accent);
  border-radius: var(--hr-radius);
}

/* Controls */
.hr-ui .form-control,
.hr-ui .form-select,
.hr-ui .input-group-text,
.hr-ui .staffing-form-panel .form-floating > .form-control,
.hr-ui .staffing-form-panel .form-floating > .form-select {
  border: 1px solid var(--hr-line-strong);
  border-radius: var(--hr-radius) !important;
  box-shadow: none !important;
  color: var(--hr-ink);
  font-size: .92rem;
}

.hr-ui .input-group-text {
  background: var(--cs-surface-soft, #f7f9f6);
  color: var(--hr-muted);
}

.hr-ui .input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.hr-ui .input-group > .input-group-text:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

.hr-ui .form-control:focus,
.hr-ui .form-select:focus,
.hr-ui .staffing-form-panel .form-control:focus,
.hr-ui .staffing-form-panel .form-select:focus {
  border-color: var(--hr-accent);
  box-shadow: 0 0 0 .2rem var(--cs-focus, rgba(0, 168, 143, .24)) !important;
}

.hr-ui .form-label,
.hr-ui label.fw-semibold {
  color: var(--hr-ink);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.hr-ui .form-floating > label { color: var(--hr-muted); }

/* Buttons */
.hr-ui .btn {
  border-radius: var(--hr-radius) !important;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: none;
}

.hr-ui .btn-primary { box-shadow: none; }

.hr-ui .btn-outline-secondary,
.hr-ui .btn-light {
  background: #fff;
  border-color: var(--hr-line-strong);
  color: var(--hr-ink);
}

.hr-ui .btn-outline-secondary:hover,
.hr-ui .btn-light:hover {
  background: var(--cs-surface-tint, #edf2ef);
  border-color: var(--hr-accent);
  color: var(--hr-accent);
}

/* Square back button, aligned to the heading */
.hr-ui .btn.rounded-circle,
.hr-ui .staffing-icon-btn {
  align-items: center;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  padding: 0;
  width: 34px;
}

/* Status badges: small, flat and legible */
.hr-ui .badge {
  font-family: var(--hr-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .35em .6em;
  text-transform: uppercase;
}

.hr-ui .badge.bg-success { background: var(--cs-success-soft, #d9f5ef) !important; color: var(--cs-success, #087260) !important; }
.hr-ui .badge.bg-warning { background: var(--cs-warning-soft, #fff6df) !important; color: var(--cs-warning, #a66b00) !important; }
.hr-ui .badge.bg-danger { background: var(--cs-danger-soft, #fff1f2) !important; color: var(--cs-danger, #b4233a) !important; }
.hr-ui .badge.bg-info { background: var(--cs-primary-soft, #e4eeec) !important; color: var(--hr-accent) !important; }
.hr-ui .badge.bg-secondary { background: #eef0ef !important; color: #475250 !important; }

/* Tables: solid heading, calmer weight, room to breathe */
.hr-ui .table:not(.cs-table-plain) thead th {
  background: var(--hr-accent) !important;
  border-bottom: 0 !important;
  border-right: 0;
  font-weight: 600;
  letter-spacing: .06em;
  padding: .65rem .75rem;
}

.hr-ui .table:not(.cs-table-plain) tbody td {
  border-color: var(--hr-line);
  font-size: .92rem;
  line-height: 1.35;
  padding: .6rem .75rem;
}

.hr-ui .table-responsive {
  background: #fff;
  border: 1px solid var(--hr-line);
  border-radius: var(--hr-radius);
}

/* Alerts: flat with an accent edge */
.hr-ui .alert {
  border: 1px solid var(--hr-line);
  border-left-width: 4px;
  border-radius: var(--hr-radius);
  box-shadow: none;
  font-size: .9rem;
}

.hr-ui .alert-info { background: var(--cs-primary-soft, #e4eeec); border-left-color: var(--hr-accent); color: var(--hr-ink); }
.hr-ui .alert-success { background: var(--cs-success-soft, #d9f5ef); border-left-color: var(--cs-success, #087260); color: var(--hr-ink); }
.hr-ui .alert-warning { background: var(--cs-warning-soft, #fff6df); border-left-color: var(--cs-warning, #a66b00); color: var(--hr-ink); }
.hr-ui .alert-danger { background: var(--cs-danger-soft, #fff1f2); border-left-color: var(--cs-danger, #b4233a); color: var(--hr-ink); }

/* Tabs, pagination, modals */
.hr-ui .pagination .page-link { border-radius: var(--hr-radius) !important; color: var(--hr-accent); }
.hr-ui .pagination .active > .page-link { background: var(--hr-accent); border-color: var(--hr-accent); color: #fff; }
.hr-ui .nav-tabs .nav-link { border-radius: var(--hr-radius) var(--hr-radius) 0 0; color: var(--hr-muted); font-weight: 600; }
.hr-ui .nav-tabs .nav-link.active { color: var(--hr-accent); }

@media (max-width: 575.98px) {
  .hr-ui { font-size: .93rem; }
  .hr-ui h4 { font-size: 1.15rem; }
  .hr-ui .card-body { padding: .9rem 1rem; }
}

/* Side panel of actions for one record (vacancies and the like) */
.hr-action-panel {
  --bs-offcanvas-width: 380px;
}

.hr-action-panel .offcanvas-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--hr-line);
}

.hr-action-panel-kicker {
  font-size: .7rem;
  letter-spacing: .06em;
}

.hr-action-panel-facts {
  display: grid;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.hr-action-panel-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .88rem;
}

.hr-action-panel-facts dt {
  color: var(--hr-muted);
  font-weight: 500;
}

.hr-action-panel-facts dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}

.hr-action-panel-heading {
  margin: 1rem 0 .5rem;
  color: var(--hr-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hr-action-panel-list .list-group-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  margin-bottom: .5rem;
  padding: .8rem .9rem;
  border: 1px solid var(--hr-line);
  border-radius: var(--hr-radius) !important;
  text-align: left;
}

.hr-action-panel-list .list-group-item > i {
  flex: 0 0 auto;
  width: 1.5rem;
  font-size: 1.1rem;
  text-align: center;
}

.hr-action-panel-list .list-group-item > span {
  font-weight: 600;
  line-height: 1.25;
}

.hr-action-panel-list .list-group-item small {
  display: block;
  color: var(--hr-muted);
  font-size: .78rem;
  font-weight: 400;
}

.hr-action-panel-danger {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hr-line);
}

@media (max-width: 575.98px) {
  .hr-action-panel {
    --bs-offcanvas-width: 100%;
  }
}

/* -------------------------------------------------------
   Page shell: heading block, toolbar and record cards.
   Used by the interview, offer and assumption-of-duty pages.
------------------------------------------------------- */
.hr-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .9rem 1rem;
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hr-line);
}

.hr-page-back { flex: 0 0 auto; }

.hr-page-title {
  flex: 1 1 14rem;
  min-width: 0;
}

.hr-kicker {
  color: var(--cs-accent, #00a88f);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hr-ui .hr-page-title h1 {
  margin: .1rem 0 0;
  color: var(--hr-accent);
  font-family: var(--hr-serif);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
}

.hr-page-title p {
  margin: .2rem 0 0;
  color: var(--hr-muted);
  font-size: .9rem;
}

.hr-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

.hr-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0 0 1rem;
}

.hr-toolbar .form-select,
.hr-toolbar .input-group {
  flex: 1 1 14rem;
  max-width: 26rem;
}

.hr-section-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1.4rem 0 .6rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--hr-line);
  color: var(--hr-accent);
  font-family: var(--hr-serif);
  font-size: 1rem;
  font-weight: 700;
}

.hr-section-label:first-of-type { margin-top: 0; }

.hr-card-list {
  display: grid;
  gap: .75rem;
}

.hr-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--hr-line);
  border-left: 3px solid var(--hr-accent);
  border-radius: var(--hr-radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(9, 43, 40, .05);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.hr-card:hover {
  border-color: var(--hr-line-strong);
  border-left-color: var(--hr-accent);
  box-shadow: 0 4px 12px rgba(9, 43, 40, .08);
}

.hr-card-main {
  flex: 1 1 16rem;
  min-width: 0;
}

.hr-ui .hr-card-title {
  margin: 0;
  color: var(--hr-ink);
  font-family: var(--hr-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.hr-card-sub {
  display: block;
  color: var(--hr-muted);
  font-size: .85rem;
  font-weight: 400;
}

.hr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .5rem;
}

.hr-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  border: 1px solid var(--hr-line);
  border-radius: var(--hr-radius-sm);
  background: var(--cs-surface-soft, #f7f9f6);
  color: var(--hr-ink);
  font-size: .78rem;
  line-height: 1.3;
}

.hr-chip i { color: var(--hr-accent); }

.hr-chip.is-accent {
  border-color: transparent;
  background: var(--hr-accent);
  color: #fff;
}

.hr-chip.is-accent i { color: #fff; }

.hr-chip.is-good {
  border-color: transparent;
  background: var(--cs-success-soft, #d9f5ef);
  color: var(--cs-success, #087260);
}

.hr-chip.is-warn {
  border-color: transparent;
  background: var(--cs-warning-soft, #fff6df);
  color: var(--cs-warning, #a66b00);
}

.hr-chip.is-bad {
  border-color: transparent;
  background: var(--cs-danger-soft, #fff1f2);
  color: var(--cs-danger, #b4233a);
}

.hr-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.hr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
}

.hr-empty {
  padding: 2.25rem 1rem;
  border: 1px dashed var(--hr-line-strong);
  border-radius: var(--hr-radius);
  background: #fff;
  color: var(--hr-muted);
  text-align: center;
}

.hr-empty i {
  display: block;
  margin-bottom: .5rem;
  color: var(--hr-accent);
  font-size: 1.8rem;
}

.hr-empty strong {
  display: block;
  color: var(--hr-ink);
}

@media (max-width: 575.98px) {
  .hr-page-actions { margin-left: 0; width: 100%; }
  .hr-card-actions { width: 100%; }
}

/* -------------------------------------------------------
   Interview slots: figures, and a card with the time to the left.
------------------------------------------------------- */
.hr-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 0 1.25rem;
}

.hr-stat {
  display: flex;
  flex-direction: column;
  padding: .75rem 1rem;
  border: 1px solid var(--hr-line);
  border-radius: var(--hr-radius);
  background: #fff;
}

.hr-stat-value {
  color: var(--hr-accent);
  font-family: var(--hr-serif);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.hr-stat-label {
  color: var(--hr-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hr-stat.is-accent {
  border-color: transparent;
  background: var(--hr-accent);
}

.hr-stat.is-accent .hr-stat-value,
.hr-stat.is-accent .hr-stat-label {
  color: #fff;
}

.hr-slot {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: 1rem 1.25rem;
  align-items: center;
  padding: .9rem 1.1rem;
  border: 1px solid var(--hr-line);
  border-radius: var(--hr-radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(9, 43, 40, .05);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.hr-slot:hover {
  border-color: var(--hr-line-strong);
  box-shadow: 0 4px 12px rgba(9, 43, 40, .08);
}

.hr-slot.is-past {
  background: var(--cs-surface-soft, #f7f9f6);
}

.hr-slot.is-past .hr-slot-time strong {
  color: var(--hr-muted);
}

.hr-slot-time {
  display: grid;
  justify-items: start;
  padding-right: 1.25rem;
  border-right: 2px solid var(--hr-accent);
  line-height: 1.2;
}

.hr-slot-time strong {
  color: var(--hr-accent);
  font-family: var(--hr-serif);
  font-size: 1.55rem;
}

.hr-slot-ampm {
  margin-top: -.15rem;
  color: var(--hr-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.hr-slot-until {
  margin-top: .3rem;
  color: var(--hr-ink);
  font-size: .8rem;
}

.hr-slot-length {
  color: var(--hr-muted);
  font-size: .72rem;
}

.hr-slot-body {
  min-width: 0;
}

.hr-seats {
  margin-top: .65rem;
}

.hr-seat-meter {
  height: 6px;
  max-width: 18rem;
  border-radius: 3px;
  background: var(--hr-line);
  overflow: hidden;
}

.hr-seat-meter span {
  display: block;
  height: 100%;
  background: var(--hr-accent);
}

.hr-seat-text {
  margin-top: .3rem;
  color: var(--hr-muted);
  font-size: .8rem;
}

.hr-seat-text strong {
  color: var(--hr-ink);
}

.hr-slot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
}

@media (max-width: 767.98px) {
  .hr-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hr-slot {
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
  }

  .hr-slot-time {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .5rem;
    padding: 0 0 .6rem;
    border-right: 0;
    border-bottom: 2px solid var(--hr-accent);
  }

  .hr-slot-ampm { margin-top: 0; }
  .hr-slot-until { margin: 0 0 0 auto; }
  .hr-slot-length { flex-basis: 100%; }
  .hr-slot-actions { justify-content: stretch; }
  .hr-slot-actions .btn { flex: 1 1 auto; }
}

/* -------------------------------------------------------
   An HR page opened on its own (hr_page_shell.html): margins, and a layout that fits a phone.
------------------------------------------------------- */
.hr-shell {
  max-width: 1100px;
  padding: 1rem 1rem 2.5rem;
}

.hr-shell img,
.hr-shell video {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767.98px) {
  .hr-shell { padding: .75rem .75rem 2rem; }

  .hr-shell .hr-page-head { flex-direction: column; align-items: stretch; }
  /* in a column the title's 14rem basis would become its height, leaving a blank band under the heading */
  .hr-shell .hr-page-title { flex: 0 0 auto; }
  .hr-shell .hr-page-actions { width: 100%; }
  .hr-shell .hr-page-actions .btn { width: 100%; }

  /* a wide table scrolls inside the page instead of pushing the page sideways */
  .hr-shell .table-responsive,
  .hr-shell .hr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hr-shell table:not(.vacancy-table) { max-width: 100%; }
}

/* -------------------------------------------------------
   My job applications on a phone: one card per application, its details opening inside the card.
------------------------------------------------------- */
@media (max-width: 767.98px) {
  #application-container.hr-ui { padding-left: .75rem; padding-right: .75rem; }

  #application-container .table-responsive { overflow: visible; }
  #application-container .card:has(.accordion) { border: 0 !important; background: transparent !important; box-shadow: none !important; }
  #application-container .card:has(.accordion) > .card-body { padding: 0 !important; background: transparent !important; }
  #application-container table,
  #application-container tbody { display: block; width: 100%; min-width: 0 !important; }

  #application-container tbody > tr:not(.object-detail-row) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title actions" "status actions";
    gap: .45rem .75rem;
    align-items: center;
    padding: .85rem 1rem;
    border: 1px solid var(--hr-line);
    border-radius: var(--hr-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(9, 43, 40, .05);
  }

  #application-container tbody > tr:not(.object-detail-row) > td {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
  }

  #application-container tbody > tr:not(.object-detail-row) > td:nth-child(1) { display: none; }
  #application-container tbody > tr:not(.object-detail-row) > td:nth-child(2) {
    grid-area: title;
    font-family: var(--hr-serif);
    font-weight: 700;
    color: var(--hr-accent);
    overflow-wrap: anywhere;
    white-space: normal !important;
    min-width: 0;
  }
  #application-container tbody > tr:not(.object-detail-row) > td:nth-child(3) { grid-area: status; }
  #application-container tbody > tr:not(.object-detail-row) > td:nth-child(4) { grid-area: actions; }
  #application-container tbody > tr:not(.object-detail-row) .btn { min-width: 2.5rem; min-height: 2.5rem; }

  #application-container tr.object-detail-row { display: block; margin-bottom: .75rem; }
  #application-container tr.object-detail-row > td { display: block; width: 100%; padding: 0; border: 0; }
  #application-container tr.object-detail-row .accordion-collapse > .p-4 {
    padding: 1rem !important;
    border: 1px solid var(--hr-line);
    border-top: 0;
    border-radius: 0 0 var(--hr-radius) var(--hr-radius);
  }
  #application-container tr.object-detail-row .border-start { border-left: 0 !important; padding-left: 0 !important; }
  #application-container tr.object-detail-row .row { --bs-gutter-y: 1rem; }
}

/* -------------------------------------------------------
   Application progress in a side panel.
------------------------------------------------------- */
.hr-progress-offcanvas { --bs-offcanvas-width: min(100vw, 26rem); }

.progress-panel .progress-panel-summary {
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--cs-border, #d9e0dc);
  border-radius: 6px;
  background: var(--cs-surface-soft, #f7f9f6);
}

.progress-panel .progress-panel-heading {
  margin: 1.25rem 0 .6rem;
  color: var(--cs-muted, #5d6c68);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.progress-steps,
.progress-history {
  margin: 0;
  padding: 0;
  list-style: none;
}

.progress-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem 0;
}

.progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: .8rem;
  top: 2.05rem;
  bottom: -.5rem;
  width: 2px;
  background: var(--cs-border, #d9e0dc);
}

.progress-step.is-complete:not(:last-child)::after { background: #198754; }

.progress-step-dot {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 2px solid var(--cs-border, #d9e0dc);
  border-radius: 50%;
  background: #fff;
  color: #fff;
  font-size: .8rem;
}

.progress-step.is-complete .progress-step-dot { border-color: #198754; background: #198754; }
.progress-step.is-current .progress-step-dot { border-color: var(--cs-primary, #123b36); background: var(--cs-primary, #123b36); }
.progress-step-name { font-size: .92rem; }
.progress-step.is-current .progress-step-name { font-weight: 700; }
.progress-step:not(.is-complete):not(.is-current) .progress-step-name { color: var(--cs-muted, #5d6c68); }

.progress-next {
  margin-bottom: .6rem;
  padding: .75rem;
  border: 1px solid var(--cs-border, #d9e0dc);
  border-radius: 6px;
}

.progress-history li {
  padding: .55rem 0 .55rem .9rem;
  border-left: 2px solid var(--cs-border, #d9e0dc);
}

/* -------------------------------------------------------
   Job offers and shortlisted applicants: a card per person with the
   key facts, and a side panel (offcanvas) for everything secondary.
   Phones stack everything; the panel is full width below 576px.
------------------------------------------------------- */
.hr-offer-card {
  display: block;
  padding: 0;
}

.hr-offer-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .9rem 1.1rem .5rem;
}

.hr-offer-card__head .hr-card-main { flex: 1 1 14rem; }

.hr-offer-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem 1rem;
  margin: 0;
  padding: .25rem 1.1rem .9rem;
}

.hr-offer-facts > div { min-width: 0; }

.hr-offer-facts dt {
  color: var(--hr-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.hr-offer-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: .9rem;
}

.hr-offer-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .75rem 1.1rem;
  border-top: 1px solid var(--hr-line);
}

.hr-ui .hr-offer-card__actions .btn,
.hr-ui .hr-offer-panel .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}

.hr-offer-card__actions .btn,
.hr-offer-card__actions form { flex: 1 1 9rem; }

.hr-offer-panel { --bs-offcanvas-width: min(34rem, 100vw); }

.hr-offer-panel .offcanvas-body { overflow-x: hidden; }

.hr-panel-section { margin: 0 0 1.4rem; }

.hr-panel-section > h3 {
  margin: 0 0 .6rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--hr-line);
  color: var(--hr-accent);
  font-family: var(--hr-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.hr-ui .hr-panel-section > h4 {
  font-family: var(--hr-sans);
  font-size: .9rem;
  font-weight: 700;
}

.hr-dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .1rem 1rem;
  margin: 0;
  font-size: .9rem;
}

.hr-dl dt { color: var(--hr-muted); font-size: .78rem; font-weight: 600; }
.hr-dl dd { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.hr-dl .is-missing { color: var(--hr-muted); font-style: italic; }

.hr-score-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }

.hr-score-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .15rem .75rem;
  padding: .5rem .7rem;
  border: 1px solid var(--hr-line);
  border-radius: var(--hr-radius-sm);
  background: var(--cs-surface-soft, #f7f9f6);
}

.hr-score-list .who { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.hr-score-list .score { font-weight: 700; }
.hr-score-list .note { flex-basis: 100%; color: var(--hr-muted); font-size: .8rem; }

@media (min-width: 576px) {
  .hr-offer-card__actions .btn,
  .hr-offer-card__actions form { flex: 0 0 auto; }
  .hr-dl { grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr); }
  .hr-dl dd { margin-bottom: .15rem; }
}

@media (min-width: 768px) {
  .hr-offer-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .hr-offer-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}