.hiring-detail__edit {
  align-items: center;
  background: #0a6f6c;
  border: 1px solid #0a6f6c;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 750;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
}

.hiring-detail__edit:hover {
  background: #084b4a;
  border-color: #084b4a;
}

.hiring-detail__edit:focus-visible,
.hiring-editor button:focus-visible,
.hiring-editor input:focus-visible,
.hiring-editor select:focus-visible,
.hiring-editor textarea:focus-visible {
  outline: 3px solid rgba(10, 111, 108, 0.22);
  outline-offset: 2px;
}

.hiring-detail__edit:disabled,
.hiring-editor button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.hiring-editor-open {
  overflow: hidden;
}

.hiring-editor {
  background: #f8f6f1;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(10, 37, 33, 0.28);
  color: #142730;
  height: min(92vh, 940px);
  margin: auto;
  max-height: 92vh;
  max-width: 1080px;
  padding: 0;
  width: calc(100vw - 36px);
}

.hiring-editor::backdrop {
  background: rgba(8, 28, 26, 0.68);
  backdrop-filter: blur(4px);
}

.hiring-editor__form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}

.hiring-editor__header {
  align-items: start;
  background: #0a3730;
  border-bottom: 4px solid #c26f44;
  color: #fff;
  display: flex;
  gap: 28px;
  justify-content: space-between;
  padding: 28px 32px 25px;
}

.hiring-editor__header span,
.hiring-editor__section > header span {
  color: #d98555;
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hiring-editor__header h1 {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 7px 0 8px;
}

.hiring-editor__header p {
  color: #d6e2de;
  font-size: 0.86rem;
  margin: 0;
}

.hiring-editor__close {
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: 300 1.65rem/1 sans-serif;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.hiring-editor__body {
  display: grid;
  gap: 18px;
  overflow: auto;
  padding: 24px 30px 40px;
}

.hiring-editor__section {
  background: #fff;
  border: 1px solid #d5dcd9;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(10, 37, 33, 0.03);
  padding: 22px;
}

.hiring-editor__section > header {
  align-items: end;
  border-bottom: 1px solid #e1e6e3;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 15px;
}

.hiring-editor__section > header h2 {
  color: #0a3730;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 4px 0 0;
}

.hiring-editor__section > header p {
  color: #5b6c70;
  font-size: 0.76rem;
  margin: 0;
  max-width: 440px;
  text-align: right;
}

.hiring-editor__grid {
  display: grid;
  gap: 15px 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hiring-editor__field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.hiring-editor__field--wide {
  grid-column: 1 / -1;
}

.hiring-editor__field > span {
  color: #44565a;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.hiring-editor__field > span span {
  color: #b15832;
}

.hiring-editor input,
.hiring-editor select,
.hiring-editor textarea {
  background: #fbfaf7;
  border: 1px solid #c7d0cd;
  border-radius: 9px;
  color: #142730;
  font: inherit;
  font-size: 0.86rem;
  min-height: 42px;
  padding: 9px 11px;
  width: 100%;
}

.hiring-editor textarea {
  line-height: 1.5;
  min-height: 92px;
  resize: vertical;
}

.hiring-editor__checkbox {
  align-items: center;
  align-self: end;
  background: #edf5f2;
  border-radius: 9px;
  display: flex;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
}

.hiring-editor__checkbox input {
  accent-color: #0a6f6c;
  min-height: 18px;
  width: 18px;
}

.hiring-editor__repeats {
  display: grid;
  gap: 12px;
}

.hiring-editor__repeat {
  background: #fbfaf7;
  border: 1px solid #d7dedb;
  border-radius: 11px;
  margin: 0;
  padding: 16px;
}

.hiring-editor__repeat legend {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 2px 12px;
  width: 100%;
}

.hiring-editor__repeat legend span {
  color: #0a3730;
  font-size: 0.83rem;
  font-weight: 800;
}

.hiring-editor__repeat legend button,
.hiring-editor__add {
  background: transparent;
  border: 1px solid #b9c9c4;
  border-radius: 8px;
  color: #0a6f6c;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  min-height: 34px;
  padding: 0 11px;
}

.hiring-editor__repeat legend button {
  border-color: #e3c9bd;
  color: #a44b2d;
}

.hiring-editor__empty {
  color: #6e7c7b;
  font-size: 0.82rem;
  margin: 2px 0;
}

.hiring-editor__footer {
  align-items: center;
  background: #fff;
  border-top: 1px solid #d7dedb;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 16px 30px;
}

.hiring-editor__footer > div {
  display: flex;
  gap: 10px;
}

.hiring-editor__status {
  color: #5b6c70;
  font-size: 0.76rem;
  margin: 0;
}

.hiring-editor__status--error {
  color: #a13f27;
  font-weight: 700;
}

.hiring-editor__status--success {
  color: #0a6f4d;
  font-weight: 700;
}

.hiring-editor__cancel,
.hiring-editor__save {
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  min-height: 42px;
  padding: 0 17px;
}

.hiring-editor__cancel {
  background: #fff;
  border: 1px solid #bfcac7;
  color: #34484b;
}

.hiring-editor__save {
  background: #0a6f6c;
  border: 1px solid #0a6f6c;
  color: #fff;
}

@media (max-width: 760px) {
  .hiring-editor {
    border-radius: 0;
    height: 100dvh;
    max-height: 100dvh;
    width: 100vw;
  }

  .hiring-editor__header,
  .hiring-editor__body,
  .hiring-editor__footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hiring-editor__section > header,
  .hiring-editor__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .hiring-editor__section > header p {
    text-align: left;
  }

  .hiring-editor__grid {
    grid-template-columns: 1fr;
  }

  .hiring-editor__footer > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media print {
  .hiring-detail__edit,
  .hiring-editor {
    display: none !important;
  }
}