/*
 * Admin job offers
 *
 * Feature classes for the recruitment administration views.
 */

.admin-job-offer-modal-form {
  padding: 1rem 2.5rem;
}

.admin-job-offer-modal-form__field {
  margin-block-start: 1rem;
}

.admin-job-offer-modal-form__label {
  display: block;
  margin-block-end: 0.25rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 500;
}

.admin-job-offer-form__content-action {
  display: flex;
  justify-content: center;
  margin-block-start: 1rem;
}

.admin-job-offers-page {
  display: grid;
  gap: 1rem;
}

.admin-job-offers-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 0.5rem;
}

.admin-job-offers-page__intro {
  max-inline-size: 62rem;
}

.admin-job-offers-page__eyebrow {
  margin: 0 0 0.35rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 600;
}

.admin-job-offers-page__heading {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 700;
  line-height: 1.15;
}

.admin-job-offers-page__description {
  max-inline-size: 70ch;
  margin: 0.5rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-normal);
  line-height: 1.45;
}

.admin-job-offers-page__count {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.5rem;
  min-block-size: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.admin-job-offers-page__count-icon,
.admin-job-offer-row__icon,
.admin-job-offer-row__office-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-job-offers-page__count-icon .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.admin-job-offers-table {
  overflow-x: auto;
}

.admin-job-offers-table .simple-table {
  min-inline-size: 56rem;
  margin-block-start: 0;
}

.admin-job-offers-table .th {
  padding-block: 0.85rem;
  padding-inline: 1rem;
}

.admin-job-offer-row .td {
  vertical-align: middle;
  padding-block: 0.9rem;
  padding-inline: 1rem;
}

.admin-job-offer-row__main {
  inline-size: 42%;
  min-inline-size: 18rem;
}

.admin-job-offer-row__identity {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-inline-size: 0;
}

.admin-job-offer-row__icon {
  flex: 0 0 auto;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid color-mix(in oklch, var(--color-info) 18%, var(--color-border));
  border-radius: var(--radius-lg);
  background-color: color-mix(in oklch, var(--color-info) 9%, var(--color-surface));
  color: var(--color-info);
}

.admin-job-offer-row__icon .icon {
  inline-size: 1.1rem;
  block-size: 1.1rem;
}

.admin-job-offer-row__copy {
  display: grid;
  gap: 0.3rem;
  min-inline-size: 0;
}

.admin-job-offer-row__title {
  color: var(--color-ink);
  font-size: var(--text-normal);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

.admin-job-offer-row__title:hover,
.admin-job-offer-row__title:focus-visible {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.admin-job-offer-row__office {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-inline-size: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 500;
}

.admin-job-offer-row__office-icon .icon {
  inline-size: 0.95rem;
  block-size: 0.95rem;
  color: var(--color-ink-lighter);
}

.admin-job-offer-row__period {
  min-inline-size: 13rem;
}

.admin-job-offer-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  inline-size: fit-content;
  border-radius: var(--radius-pill);
  padding-block: 0.25rem;
  padding-inline: 0.55rem;
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1;
}

.admin-job-offer-status__dot {
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: var(--radius-pill);
  background-color: currentColor;
}

.admin-job-offer-status--active {
  background-color: rgb(var(--palette-green-50));
  color: rgb(var(--palette-green-700));
  box-shadow: inset 0 0 0 1px rgb(var(--palette-green-200));
}

.admin-job-offer-status--inactive {
  background-color: var(--color-surface-subtle);
  color: var(--color-ink-light);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.admin-job-offer-row__dates {
  display: block;
  margin-block-start: 0.45rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 500;
}

.admin-job-offer-row__metric {
  min-inline-size: 7.5rem;
}

.admin-job-offer-row__metric-value,
.admin-job-offer-row__metric-label {
  display: block;
}

.admin-job-offer-row__metric-value {
  color: var(--color-ink);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
}

.admin-job-offer-row__metric-label {
  margin-block-start: 0.2rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 500;
}

.admin-job-offer-row__actions {
  inline-size: 4rem;
}

.admin-job-offers-table__pagination {
  display: flex;
  justify-content: flex-end;
  padding-block-start: 0.75rem;
}

.admin-job-offer-board {
  display: flex;
  align-items: flex-start;
  column-gap: 1.25rem;
  margin-block-start: 1rem;
  padding-block-end: 1rem;
  overflow-x: auto;
}

.admin-job-offer-edit {
  margin-block-start: 1.5rem;
  padding: 1.25rem 1rem;
}

@media (min-width: 640px) {
  .admin-job-offer-edit {
    padding: 1.5rem;
  }
}

@media (max-width: 760px) {
  .admin-job-offers-page__header {
    display: grid;
  }

  .admin-job-offers-page__count {
    justify-self: start;
  }

  .admin-job-offers-table {
    overflow-x: visible;
  }

  .admin-job-offers-table .simple-table {
    min-inline-size: 0;
  }

  .admin-job-offers-table thead {
    position: absolute;
    overflow: hidden;
    inline-size: 1px;
    block-size: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .admin-job-offers-table tbody {
    display: grid;
    gap: 0.875rem;
    padding: 0.75rem;
    background-color: var(--color-surface-muted);
  }

  .admin-job-offer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
  }

  .admin-job-offer-row .td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0;
    text-align: end;
    white-space: normal;
  }

  .admin-job-offers-table .table-stripped > tbody > .admin-job-offer-row > .td {
    background-color: transparent;
  }

  .admin-job-offer-row .td::before {
    content: attr(data-label);
    flex: 0 1 42%;
    color: var(--color-ink-lighter);
    font-size: var(--text-small);
    font-weight: 600;
    line-height: 1.2;
    text-align: start;
  }

  .admin-job-offer-row__main {
    display: block !important;
    inline-size: 100%;
    min-inline-size: 0;
    padding-block-end: 0.75rem !important;
    border-block-end: 1px solid var(--color-border);
    text-align: start !important;
  }

  .admin-job-offer-row__main::before,
  .admin-job-offer-row__actions::before {
    content: none !important;
  }

  .admin-job-offer-row__period {
    min-inline-size: 0;
  }

  .admin-job-offer-row__metric-value,
  .admin-job-offer-row__metric-label {
    text-align: end;
  }

  .admin-job-offer-row__metric-label {
    display: none;
  }

  .admin-job-offer-row__actions {
    justify-content: flex-end !important;
    inline-size: 100%;
    padding-block-start: 0.25rem !important;
  }

  .admin-job-offers-table tfoot,
  .admin-job-offers-table tfoot tr,
  .admin-job-offers-table tfoot td {
    display: block;
  }

  .admin-job-offers-table__pagination {
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .admin-job-offer-edit__form {
    grid-column: span 2 / span 2;
  }
}

.admin-job-offer-edit__heading--spaced {
  margin-block-start: 1rem;
}

.admin-job-offer-edit__copy,
.admin-job-offer-edit__link-row,
.admin-job-offer-public-page__copy,
.admin-job-offer-public-page__link-row {
  margin-block-start: 0.5rem;
}

.admin-job-offer-edit__form {
  margin-block-start: 1.5rem;
}

@media (min-width: 768px) {
  .admin-job-offer-edit__form {
    margin-block-start: 0;
  }
}

.admin-job-offer-content-form {
  padding-inline: 1.5rem;
}

.admin-job-offer-content-form__title {
  inline-size: 100%;
  border: 0;
  font-size: 1.5rem;
}

.admin-job-offer-content-form__body {
  margin-block-start: 2.5rem;
}

.admin-job-offer-content-form__description {
  inline-size: 100%;
  min-block-size: 40vh;
  border: 0;
  font-size: 1.25rem;
}

.admin-job-offer-public-page {
  display: flex;
  flex-direction: column;
}

.admin-job-offer-public-page__form {
  margin-block-start: 1.5rem;
}

.admin-job-offer-public-page__copy--strong {
  font-weight: 600;
}

@media (min-width: 640px) {
  .admin-job-offer-public-page {
    flex-direction: row-reverse;
  }

  .admin-job-offer-public-page__form {
    inline-size: 66.666667%;
  }

  .admin-job-offer-public-page__info {
    inline-size: 33.333333%;
  }
}

@media (min-width: 768px) {
  .admin-job-offer-public-page__form {
    margin-block-start: 0;
  }
}

.admin-job-offer-theme-picker__label {
  margin-block-end: 0.75rem;
}

.admin-job-offer-theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.admin-job-offer-theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: transparent;
  padding: 0.5rem;
  cursor: pointer;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

.admin-job-offer-theme-card--idle:hover {
  border-color: var(--color-border-medium);
}

.admin-job-offer-theme-card--selected {
  border-color: var(--color-info);
  box-shadow: 0 0 0 2px rgb(var(--palette-blue-200));
}

.admin-job-offer-theme-card__preview {
  inline-size: 7rem;
  block-size: 4rem;
  margin-block-end: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.admin-job-offer-theme-card__hero,
.admin-job-offer-theme-card__body {
  block-size: 2rem;
}

.admin-job-offer-theme-card__body {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--color-surface);
  padding-inline: 0.5rem;
}

.admin-job-offer-theme-card__dot {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: var(--radius-pill);
}

.admin-job-offer-theme-card__line {
  flex: 1 1 auto;
  block-size: 0.375rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-border);
}

.admin-job-offer-theme-card__label {
  color: var(--color-ink-light);
  font-size: 0.75rem;
  font-weight: 500;
}

.admin-job-offer-skill-fields__row,
.admin-job-offer-skill-fields__controls {
  display: flex;
  align-items: center;
}

.admin-job-offer-skill-fields__row {
  justify-content: space-between;
}

.admin-job-offer-skill-fields__controls {
  inline-size: 100%;
}

@media (min-width: 640px) {
  .admin-job-offer-skill-fields__controls {
    justify-content: space-between;
  }
}

.admin-job-offer-skill-fields__field {
  flex: 1 1 50%;
  inline-size: 50%;
  margin-block-start: 1rem;
  margin-inline-end: 1rem;
}

.admin-job-offer-skill-fields__field:first-child {
  flex-grow: 1;
  margin-inline-end: 1.5rem;
}

.admin-job-offer-skill-fields__control {
  margin-block-start: 0.25rem;
}

.admin-job-offer-skill-fields__remove {
  margin-block-start: 2.5rem;
}

.admin-job-offer-skill-fields__remove-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-danger-strong);
}

.admin-job-offer-skill-fields__remove-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.job-architecture-filter {
  display: flex;
  gap: 1rem;
  margin-block-end: 1rem;
}

.job-architecture-filter__form {
  display: flex;
  gap: 1rem;
}

.job-architecture-filter__empty {
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
}

.job-architecture-page-section {
  margin-block-start: 1.5rem;
}

.job-architecture-form-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.job-architecture-form-section__description,
.job-architecture-form-section__hint {
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
}

.job-architecture-form-section__description {
  margin-block-start: 0.5rem;
  line-height: 1.25rem;
}

.job-architecture-form-section__hint {
  margin-block-start: 0.25rem;
  line-height: 1rem;
}

.job-architecture-form-section__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-inline-size: 0;
}

.job-architecture-divider {
  border-block-start: 1px solid var(--color-border);
}

.job-architecture-summary,
.job-architecture-score-card {
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  padding: 1rem;
}

.job-architecture-score-card__value {
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 600;
}

.job-architecture-detail-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 1rem;
}

.job-architecture-detail-list--stacked {
  display: flex;
  flex-direction: column;
}


.job-architecture-detail-list__description {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: 0.875rem;
}

.job-architecture-detail-list__description--prewrap {
  white-space: pre-wrap;
}

.job-architecture-detail-list__wide {
  min-inline-size: 0;
}

.job-architecture-show-header,
.job-architecture-show-body {
  padding: 1.25rem 1rem;
}

.job-architecture-show-header__subtitle {
  margin-block-start: 0.25rem;
  max-inline-size: 42rem;
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
}

.job-architecture-show-body {
  border-block-start: 1px solid var(--color-border);
}

.job-template-title {
  color: var(--color-ink);
  font-weight: 600;
}

.job-template-content {
  margin-block-start: 1.5rem;
}

.job-template-list-pagination,
.job-step-template-list {
  margin-block-start: 1rem;
}

.job-step-template-header {
  display: flex;
  align-items: center;
}

.job-step-template-notification {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem;
}

.job-step-template-notification__action {
  margin-inline-start: 1.5rem;
}


.job-step-template-meeting-choice {
  margin: 1rem;
}

.job-step-template-meeting-choice__label {
  padding-inline-start: 0.5rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 500;
}

.job-valuation-form {
  padding-inline: 2.5rem;
  padding-block: 1rem;
}

.job-valuation-progress {
  margin-block-start: 0.5rem;
}

.job-valuation-progress__track {
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--color-border);
}

.job-valuation-progress__bar {
  block-size: 0.5rem;
  border-radius: var(--radius-pill);
}

.job-valuation-progress__bar--success {
  background-color: var(--color-success-strong);
}

.job-valuation-progress__bar--danger {
  background-color: var(--color-danger-strong);
}

@media (min-width: 640px) {
  .job-architecture-show-header,
  .job-architecture-show-body {
    padding-inline: 1.5rem;
  }

  .job-step-template-notification {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .job-architecture-form-section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .job-architecture-detail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-architecture-detail-list--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .job-architecture-detail-list--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .job-architecture-detail-list__wide {
    grid-column: span 2 / span 2;
  }
}

.candidate-meeting-page {
  max-inline-size: 80rem;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .candidate-meeting-page__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2rem;
  }

  .candidate-meeting-page__main {
    grid-column: span 7 / span 7;
  }

  .candidate-meeting-page__aside {
    grid-column: span 5 / span 5;
  }
}

.candidate-meeting-page__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.candidate-meeting-card {
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  box-shadow:
    var(--shadow-ring-subtle),
    var(--shadow-sm);
}

@media (min-width: 1024px) {
  .candidate-meeting-card--sticky {
    position: sticky;
    inset-block-start: 1.5rem;
  }
}

.candidate-meeting-card__header {
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--color-border-muted);
}

.candidate-meeting-card__body {
  padding: 1rem 1.25rem;
}

.candidate-meeting-card__body--roomy {
  padding: 1.25rem 1.5rem;
}

.candidate-meeting-card__header-row,
.candidate-meeting-card__title-row {
  display: flex;
  align-items: center;
}

.candidate-meeting-card__header-row {
  justify-content: space-between;
}

.candidate-meeting-card__title-row {
  gap: 0.5rem;
}

.candidate-meeting-card__title-row--spaced {
  margin-block-end: 1rem;
}

.candidate-meeting-card__icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--radius-lg);
}

.candidate-meeting-card__icon-box--amber {
  background-color: rgb(var(--palette-amber-50));
}

.candidate-meeting-card__icon-box--blue {
  background-color: rgb(var(--palette-blue-50));
}

.candidate-meeting-card__icon-box--violet {
  background-color: rgb(var(--palette-violet-50));
}

.candidate-meeting-card__icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.candidate-meeting-card__icon--amber {
  color: rgb(var(--palette-amber-600));
}

.candidate-meeting-card__icon--blue {
  color: var(--color-info-strong);
}

.candidate-meeting-card__icon--violet {
  color: rgb(var(--palette-violet-600));
}

.candidate-meeting-card__add-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--radius-lg);
  background-color: rgb(var(--palette-indigo-50));
  padding: 0.375rem 0.75rem;
  color: rgb(var(--palette-indigo-700));
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-strong) 20%, transparent);
  transition: background-color 150ms ease;
}

.candidate-meeting-card__add-link:hover {
  background-color: rgb(var(--palette-indigo-100));
}

.candidate-meeting-card__add-icon {
  inline-size: 0.875rem;
  block-size: 0.875rem;
}

.candidate-meeting-card__list {
  margin-block-start: 1rem;
}

.candidate-meeting-template-stack > * + * {
  margin-block-start: 1.25rem;
}