/* Google Calendar に慣れた操作感へ寄せる、職員カレンダー専用の編集シート。 */
.calendar-editor-dialog {
  position: relative;
  width: min(620px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  box-sizing: border-box;
  padding: 62px 0 22px;
  border: 0;
  border-radius: 26px;
  background: #fff9f8;
  color: #2c292b;
  box-shadow: 0 22px 55px rgba(34, 25, 28, .3);
}

.calendar-editor-dialog::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: #e7c9c6;
  transform: translateX(-50%);
}

.calendar-editor-dialog > .dialog-close {
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 18px;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #4b4547;
  font-size: 30px;
  font-weight: 300;
  line-height: 38px;
}

.calendar-editor-dialog > .dialog-close:focus-visible,
.calendar-editor-dialog > .dialog-close:hover { background: #f1e5e3; }

.calendar-editor-dialog > h2 { display: none; }

.calendar-editor-dialog .calendar-editor-status {
  min-height: 0;
  margin: 0 28px 12px;
  color: #a23847;
  font-size: .9rem;
  line-height: 1.45;
}

.calendar-editor-dialog form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
}

.calendar-editor-dialog form[hidden] { display: none !important; }

.calendar-editor-dialog label {
  position: relative;
  min-height: 72px;
  box-sizing: border-box;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 11px 28px 11px 70px;
  border-top: 1px solid #eadcda;
  color: #413b3d;
  font-size: 1rem;
  font-weight: 500;
}

.calendar-editor-dialog label::before {
  position: absolute;
  left: 28px;
  top: 50%;
  width: 22px;
  color: #665e60;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  transform: translateY(-50%);
}

.calendar-editor-dialog label:not(.calendar-editor-title-field):not(.calendar-editor-person-field):not(.calendar-editor-all-day):not(.calendar-editor-wide)::before { content: '•'; }
.calendar-editor-dialog .calendar-editor-person-field::before { content: '♙'; }
.calendar-editor-dialog .calendar-editor-all-day::before { content: '◷'; }
.calendar-editor-dialog label[data-calendar-start-date]::before,
.calendar-editor-dialog label[data-calendar-start-time]::before,
.calendar-editor-dialog label[data-calendar-end-time]::before { content: '◷'; }
.calendar-editor-dialog label.calendar-editor-wide::before { content: '☰'; }

.calendar-editor-dialog input,
.calendar-editor-dialog select,
.calendar-editor-dialog textarea {
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid #bbaead;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #292527;
  font: inherit;
  font-weight: 400;
}

.calendar-editor-dialog input:focus,
.calendar-editor-dialog select:focus,
.calendar-editor-dialog textarea:focus { border-bottom: 2px solid #3f6db5; }

.calendar-editor-dialog textarea { min-height: 88px; resize: vertical; }

.calendar-editor-dialog .calendar-editor-title-field {
  grid-column: 1 / -1;
  min-height: 94px;
  padding: 10px 82px 12px;
  border-top: 0;
  font-size: 0;
}

.calendar-editor-dialog .calendar-editor-title-field::before { display: none; }

.calendar-editor-dialog .calendar-editor-title-field input {
  min-height: 56px;
  padding: 0;
  border-bottom: 1px solid #d7c4c1;
  font-size: 1.55rem;
  font-weight: 500;
}

.calendar-editor-dialog .calendar-editor-title-field input::placeholder { color: #665c5e; opacity: 1; }

.calendar-editor-dialog .calendar-editor-reservation-title-field {
  min-height: 84px;
  padding-top: 4px;
}

.calendar-editor-dialog .calendar-editor-reservation-title-field input { font-size: 1.25rem; }

.calendar-editor-dialog .calendar-editor-person-field { grid-column: 1 / -1; }

.calendar-editor-dialog .calendar-editor-all-day {
  grid-column: 1 / -1;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.calendar-editor-dialog .calendar-editor-all-day input {
  order: 2;
  width: 54px;
  min-width: 54px;
  min-height: 30px;
  margin-left: auto;
  padding: 0;
  appearance: none;
  border: 2px solid #826f6b;
  border-radius: 999px;
  background: #ead9d6;
}

.calendar-editor-dialog .calendar-editor-all-day input::after {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  margin: 2px;
  border-radius: 50%;
  background: #826f6b;
  transition: transform .15s ease;
}

.calendar-editor-dialog .calendar-editor-all-day input:checked { border-color: #4169aa; background: #bed0f3; }
.calendar-editor-dialog .calendar-editor-all-day input:checked::after { background: #4169aa; transform: translateX(22px); }

.calendar-editor-dialog .calendar-editor-wide { grid-column: 1 / -1; }

.calendar-editor-dialog .calendar-handoff-open-button {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 4px 28px 12px 70px;
  padding: 10px 16px;
  border: 1px solid #416fc0;
  border-radius: 999px;
  background: #fff;
  color: #315b9e;
  font: inherit;
  font-weight: 700;
}

.calendar-editor-dialog .calendar-handoff-comment-field {
  min-height: 0;
  padding-top: 18px;
  padding-bottom: 22px;
  font-size: 1.16rem;
}

.calendar-editor-dialog .calendar-handoff-comment-field textarea {
  min-height: 220px;
  resize: vertical;
  padding: 14px;
  font-size: 1.18rem;
  line-height: 1.7;
}

.calendar-editor-dialog .calendar-handoff-comment-meta { color: #6b6164; }

.calendar-editor-dialog .calendar-handoff-delete-button {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 2px 28px 18px 70px;
  padding: 9px 15px;
  border: 1px solid #b64c55;
  border-radius: 999px;
  background: #fff;
  color: #a23847;
  font: inherit;
  font-weight: 700;
}

.calendar-editor-dialog .calendar-editor-color-field {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 13px 28px 16px 70px;
  border: 0;
  border-top: 1px solid #eadcda;
}

.calendar-editor-dialog .calendar-editor-color-field legend {
  float: left;
  width: 100%;
  margin: 0 0 10px;
  color: #413b3d;
  font-size: 1rem;
  font-weight: 700;
}

.calendar-editor-dialog .calendar-editor-color-option {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid #d7ccca;
  border-radius: 10px;
  background: #fff;
  font-size: .9rem;
  cursor: pointer;
}

.calendar-editor-dialog .calendar-editor-color-option::before { display: none; }

.calendar-editor-dialog .calendar-editor-color-option:has(input:checked) {
  border-color: #416fc0;
  box-shadow: 0 0 0 2px #d6e3f8;
}

.calendar-editor-dialog .calendar-editor-color-option input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  opacity: 0;
}

.calendar-editor-dialog .calendar-editor-color-swatch {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 2px solid transparent;
  border-radius: 50%;
  box-sizing: border-box;
}

.calendar-editor-dialog .calendar-color-only-save-button {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0 28px 14px 70px;
  padding: 9px 15px;
  border: 1px solid #416fc0;
  border-radius: 999px;
  background: #fff;
  color: #315b9e;
  font: inherit;
  font-weight: 700;
}

.calendar-editor-dialog .calendar-editor-note,
.calendar-editor-dialog .calendar-editor-reservation-heading {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px 28px 16px 70px;
  border-top: 1px solid #eadcda;
  color: #5e5557;
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.55;
}

.calendar-editor-dialog .calendar-editor-reservation-heading {
  padding: 14px 82px 14px;
  border-top: 0;
  border-bottom: 1px solid #eadcda;
  color: #302b2d;
  font-size: 1.45rem;
  font-weight: 500;
}

.calendar-editor-dialog .confirm-button {
  position: absolute;
  top: 20px;
  right: 18px;
  z-index: 2;
  min-width: 84px;
  min-height: 42px;
  margin: 0;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: #416fc0;
  color: #fff;
  font: inherit;
  font-weight: 700;
}

.calendar-editor-dialog .confirm-button:hover,
.calendar-editor-dialog .confirm-button:focus-visible { background: #315b9e; }

@media (max-width: 560px) {
  .calendar-editor-dialog {
    width: min(100vw - 12px, 620px);
    max-height: calc(100dvh - 12px);
    padding-top: 58px;
    border-radius: 22px;
  }

  .calendar-editor-dialog form { grid-template-columns: 1fr; }
  .calendar-editor-dialog label { min-height: 65px; padding-right: 20px; }
  .calendar-editor-dialog .calendar-editor-title-field { padding-left: 70px; padding-right: 24px; }
  .calendar-editor-dialog .calendar-editor-title-field input { font-size: 1.35rem; }
  .calendar-editor-dialog .calendar-editor-reservation-heading { padding-left: 70px; padding-right: 24px; font-size: 1.3rem; }
  .calendar-editor-dialog .calendar-handoff-open-button { margin-left: 70px; }
  .calendar-editor-dialog .calendar-handoff-delete-button { margin-left: 70px; }
  .calendar-editor-dialog .calendar-editor-color-field { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 20px; }
  .calendar-editor-dialog .calendar-color-only-save-button { margin-left: 70px; }
  .calendar-editor-dialog .calendar-handoff-comment-field textarea { min-height: 190px; font-size: 1.12rem; }
}