/*
 * 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-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 (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;
}