.appointment-editor { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; }
.appointment-editor[open] { display: block; }
.appointment-editor__drawer { width: min(510px, 100vw); }
.appointment-editor__drawer .contact-create-drawer__header { flex: 0 0 auto; min-height: 37px; height: auto; padding: 7px 8px 7px 12px; }
.appointment-editor__drawer .contact-create-drawer__header h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 12px; font-weight: 400; line-height: 1.25; }
.appointment-editor form { overflow: hidden; }
.appointment-editor__fields { overflow-y: auto; display: grid; flex: 1 1 auto; min-height: 0; gap: 12px; padding: 16px; }
.appointment-editor__fields > p { margin: 0; }
.appointment-editor #appointment-editor-title:focus,
.appointment-editor #appointment-editor-title:focus-visible { outline: none; outline-offset: 0; box-shadow: none; }
.appointment-editor__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.appointment-editor__pair[hidden] { display: none; }
.appointment-editor__classification { grid-template-areas: "type status" "category ." "chapter ."; }
.appointment-editor__classification > [data-import-select="type"] { grid-area: type; }
.appointment-editor__classification > [data-import-select="status"] { grid-area: status; }
.appointment-editor__classification > [data-appointment-meeting-label] { grid-area: category; }
.appointment-editor__classification > [data-appointment-meeting-label][hidden] { display: none; }
.appointment-editor__classification > [data-appointment-bankruptcy-type] { grid-area: chapter; }
.appointment-editor__classification > [data-appointment-bankruptcy-type][hidden] { display: none; }
.appointment-editor__staff { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; border: .5px solid #aaa; border-radius: 4.8px; padding: 8px; }
.appointment-editor__staff label, .appointment-editor__all-day { display: flex; align-items: center; gap: 5px; font-size: 10.8px; }
.appointment-editor__all-day-checkbox { width: 13px; height: 13px; flex: 0 0 13px; }
.appointment-editor__staff-checkbox {
  appearance: none;
  width: 13px;
  height: 13px;
  margin: 0;
  flex: 0 0 13px;
  border: .75px solid #474747;
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
}
.appointment-editor__staff-checkbox:checked {
  background: #d9eb9e url("../general, reusable UI assets for pragtical/check.svg") center / 8px 7px no-repeat;
}
.appointment-editor__staff-checkbox:hover { border-color: #111; }

.appointment-editor__slot-conflict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  color: #6b3600;
  font-size: 10px;
  background: #fff2cf;
  border: 1px solid #d5a450;
  border-radius: 5px;
}

.appointment-editor__slot-conflict button {
  flex: 0 0 auto;
  padding: 4px 7px;
  color: #111;
  font: inherit;
  background: #fff;
  border: 1px solid #9c7a3d;
  border-radius: 4px;
}

.appointment-editor__slot-conflict.is-overridden {
  color: #285c32;
  background: #e0f5e3;
  border-color: #7fae87;
}
.appointment-editor__staff-checkbox:focus-visible { outline: 1px solid #111; outline-offset: 1px; }
.appointment-editor__recurring { display: flex; align-items: center; gap: 8px; min-width: 0; }
.appointment-editor__recurring > span { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 10.8px; font-weight: 400; }
.appointment-editor__recurring strong { font: inherit; }
.appointment-editor__recurring-info { display: grid; place-items: center; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: help; }
.appointment-editor__recurring-info img { width: 10px; height: 10px; }
.appointment-editor__recurring-info:hover,
.appointment-editor__recurring-info:focus-visible { background: var(--blue); }
.appointment-editor__past-warning { margin: -4px 0 0; padding: 7px 9px; color: #5d4600; font-size: 9.6px; line-height: 1.35; background: #fff9db; border-left: 3px solid #c69a00; }
.appointment-editor__past-warning[hidden] { display: none; }
.appointment-editor__staff legend { font-size: 10.8px; }
.appointment-editor__participant-settings { display: grid; gap: 10px; padding: 10px; border: .5px solid #aaa; border-radius: 4.8px; }
.appointment-editor__participant-settings h3 { margin: 0; font-size: 10.8px; font-weight: 500; line-height: 1.3; }
.appointment-editor__participant-heading { display: flex; align-items: center; gap: 4px; }
.appointment-editor__participant-info { display: grid; place-items: center; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: help; }
.appointment-editor__participant-info img { width: 10px; height: 10px; }
.appointment-editor__participant-info:hover,
.appointment-editor__participant-info:focus-visible { background: var(--blue); }
.appointment-editor__invite { display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 1px; }
.appointment-editor__invite > span { display: grid; gap: 1px; min-width: 0; font-size: 10.8px; line-height: 1.25; }
.appointment-editor__invite strong { font: inherit; }
.appointment-editor__invite small { color: var(--muted); font-size: 8.8px; line-height: 1.3; }
.appointment-editor__meeting-address[hidden] { display: none; }
.appointment-editor__meeting-address small { color: var(--muted); font-size: 8.8px; line-height: 1.3; }
.appointment-editor textarea { width: 100%; resize: vertical; padding: 8px; font: inherit; font-size: 10.8px; border: .5px solid #aaa; border-radius: 4.8px; }
.appointment-editor__error { color: #9e2828; }
.appointment-editor-contact-picker__control { position: relative; }
.appointment-editor-contact-picker__menu { position: absolute; z-index: 4; top: calc(100% + 2px); right: 0; left: 0; background: #fff; box-shadow: 0 2px 5px rgb(0 0 0 / 14%); }
.appointment-editor-calendar-picker__menu { position: absolute; z-index: 30; top: calc(100% + 2px); right: 0; left: 0; background: #fff; box-shadow: 0 2px 5px rgb(0 0 0 / 14%); }
.appointment-editor-contact-picker__pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.appointment-editor-contact-picker__pills[hidden] { display: none; }
.appointment-editor-contact-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 20px; max-width: 100%; padding: 1px 4px 1px 8px; border-radius: 999px; background: #e6e6e0; font-size: 10.8px; line-height: 1.2; }
.appointment-editor-contact-pill > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appointment-editor-contact-pill button { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.appointment-editor-contact-pill button:hover { background: rgb(0 0 0 / 8%); }
.appointment-date-time-field { min-width: 0; }
.appointment-date-time-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 31px;
  padding: 5px 8px;
  color: var(--ink);
  font: inherit;
  font-size: 10.8px;
  text-align: left;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 4.8px;
}
.appointment-date-time-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appointment-date-time-trigger__icon { flex: 0 0 auto; width: 13px; height: 13px; }
.appointment-date-time-trigger:hover:not(:disabled),
.appointment-date-time-trigger[aria-expanded="true"] { background: var(--blue); }
.appointment-date-time-trigger:disabled { color: #777; background: #f1f1ed; cursor: not-allowed; }
.appointment-date-time-picker {
  position: fixed;
  z-index: 120;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) 190px;
  gap: 7px 10px;
  width: min(470px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  padding: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ink);
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 5px 12px rgb(0 0 0 / 18%);
  scrollbar-width: thin;
}
.appointment-date-time-field[data-appointment-date-time-kind="date"] .appointment-date-time-picker {
  grid-template-columns: minmax(0, 1fr);
  width: min(286px, calc(100vw - 16px));
}
.appointment-date-time-picker[hidden] { display: none; }
.appointment-date-time-picker__titlebar {
  grid-column: 1 / -1;
  margin: -9px -9px 2px;
  padding: 8px 10px;
  border-bottom: .5px solid #ccc;
}
.appointment-date-time-picker__titlebar h2 { margin: 0; font-size: 11.5px; font-weight: 400; line-height: 1.25; }
.appointment-date-time-picker__header {
  display: grid;
  grid-column: 1;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 3px 4px;
  background: #fafafa;
  border: .5px solid #ccc;
  border-radius: 4px;
}
.appointment-date-time-picker__header h3 { margin: 0; overflow: hidden; font-size: 10.8px; font-weight: 400; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.appointment-date-time-picker__header button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: var(--pale-lime);
  border: .5px solid #c7cca8;
  border-radius: 50%;
}
.appointment-date-time-picker__header button img { width: 7.2px; height: 4.8px; }
.appointment-date-time-picker__header button:first-child img { transform: rotate(90deg); }
.appointment-date-time-picker__header button:last-child img { transform: rotate(-90deg); }
.appointment-date-time-picker__entry { display: grid; grid-column: 1; gap: 3px; min-width: 0; }
.appointment-date-time-picker__entry > span,
.appointment-date-time-picker__time-column > span { padding-left: 3px; color: var(--muted); font-size: 8.4px; line-height: 1.2; }
.appointment-date-time-picker__entry > input {
  width: 100%;
  min-width: 0;
  min-height: 31px;
  padding: 5px 8px;
  color: var(--ink);
  font: inherit;
  font-size: 10.5px;
  background: #fff;
  border: .5px solid #aaa;
  border-radius: 5px;
}
.appointment-date-time-picker__entry > input[aria-invalid="true"] { border-color: #b3261e; }
.appointment-date-time-picker__weekdays,
.appointment-date-time-picker__calendar { display: grid; grid-column: 1; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; min-width: 0; }
.appointment-date-time-picker__weekdays > span { display: grid; place-items: center; min-height: 22px; color: var(--muted); font-size: 8.7px; background: #f5f5f2; border-radius: 3px; }
.appointment-date-time-picker__calendar > button {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 31px;
  padding: 3px;
  color: var(--ink);
  font: inherit;
  font-size: 9.6px;
  background: #fff;
  border: .5px solid #ddd;
  border-radius: 3px;
}
.appointment-date-time-picker__calendar > button.is-outside { color: #8a8a8a; background: #fafafa; }
.appointment-date-time-picker__calendar > button[aria-selected="true"] { background: var(--pale-lime); border-color: #aeb58c; box-shadow: inset 3px 0 0 #111; }
.appointment-date-time-picker__calendar > button.is-today::after { position: absolute; right: 4px; bottom: 3px; width: 3px; height: 3px; background: #111; border-radius: 50%; content: ""; }
.appointment-date-time-picker__time { display: grid; grid-column: 2; grid-row: 2 / span 4; align-content: start; gap: 7px; min-width: 0; }
.appointment-date-time-picker__time .appointment-date-time-picker__entry { grid-column: auto; }
.appointment-date-time-picker__time-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; min-width: 0; }
.appointment-date-time-picker__time-column { display: grid; grid-template-rows: auto 222px; gap: 3px; min-width: 0; }
.appointment-date-time-picker__time-column > div { height: 222px; padding: 3px; overflow-y: auto; overscroll-behavior: contain; background: #fafafa; border: .5px solid #ccc; border-radius: 4px; scrollbar-width: thin; }
.appointment-date-time-picker__time-column button { width: 100%; min-height: 24px; padding: 3px 4px; color: var(--ink); font: inherit; font-size: 9.6px; background: transparent; border: 0; border-radius: 3px; }
.appointment-date-time-picker__time-column button[aria-selected="true"] { background: var(--pale-lime); box-shadow: inset 2px 0 0 #111; }
.appointment-date-time-picker :is(button, input):hover:not(:disabled),
.appointment-date-time-picker :is(button, input):focus-visible { background-color: var(--blue); }
.appointment-date-time-picker__status { grid-column: 1 / -1; min-height: 12px; margin: 0; color: var(--muted); font-size: 8.8px; }
.appointment-date-time-picker__status.is-error { color: #b3261e; }
.appointment-date-time-picker__status.is-warning { color: #6b5000; }
.appointment-date-time-picker__actions { display: grid; grid-column: 1 / -1; grid-template-columns: auto 1fr auto auto; gap: 6px; }
.appointment-date-time-picker__actions button { min-height: 27px; padding: 4px 9px; color: var(--ink); font: inherit; font-size: 9.4px; background: #fff; border: .5px solid #ccc; border-radius: 4.5px; }
.appointment-date-time-picker__actions [data-appointment-date-time-apply] { background: var(--pale-lime); border-color: #c7cca8; }
.appointment-editor .data-types-action-dialog__actions { flex-wrap: wrap; flex-shrink: 0; margin: 0; padding: 12px 16px; border-top: .5px solid #ccc; }
.appointment-editor .data-types-action-dialog__actions button { min-height: 28px; }
.appointment-editor .data-types-action-dialog__actions .appointment-editor__clear { background: var(--blue); border-color: #b9d8ea; }
.appointment-editor [data-appointment-cancel] { margin-right: auto; }
.business-calendars-event-block[role="button"], .business-calendars-month-event[role="button"] { cursor: pointer; }
.business-calendars-event-block:focus-visible, .business-calendars-month-event:focus-visible { outline: none; box-shadow: none; }
.appointment-editor :is(button, input, textarea, select, summary, [tabindex]):focus,
.appointment-editor :is(button, input, textarea, select, summary, [tabindex]):focus-visible { outline: none; outline-offset: 0; box-shadow: none; }
.appointment-editor :is(input, textarea, select):focus,
.appointment-editor :is(input, textarea, select):focus-visible { border-color: #aaa; }
.appointment-editor button.pragtical-dialog-close:hover,
.appointment-editor button.pragtical-dialog-close:active { background: var(--blue); border-color: transparent; outline: none; outline-offset: 0; box-shadow: none; }
.appointment-editor button.pragtical-dialog-close:focus,
.appointment-editor button.pragtical-dialog-close:focus-visible { background: transparent; border-color: transparent; outline: none; outline-offset: 0; box-shadow: none; }
@media (max-width: 480px) {
  .appointment-editor__pair { grid-template-columns: 1fr; }
  .appointment-editor__classification { grid-template-areas: "type" "category" "status"; }
  .appointment-date-time-picker { grid-template-columns: minmax(0, 1fr); width: min(286px, calc(100vw - 16px)); }
  .appointment-date-time-picker__time { grid-column: 1; grid-row: auto; }
  .appointment-date-time-picker__time-column { grid-template-rows: auto 100px; }
  .appointment-date-time-picker__time-column > div { height: 100px; }
}