/* CAL-002: compact, non-overlapping Work Calendar create/edit event dialog. */
.ps-calendar-event-dialog {
  max-height: calc(100dvh - 2rem) !important;
  max-width: 60rem !important;
  overflow: hidden !important;
  width: min(calc(100vw - 2rem), 60rem) !important;
}

.ps-calendar-event-form {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100dvh - 2rem);
  min-height: 0;
}

.ps-calendar-event-header {
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 16px 68px 14px 20px !important;
}

.ps-calendar-event-header > :first-child {
  min-width: 0;
}

.ps-calendar-event-header h2 {
  overflow-wrap: anywhere;
}

.ps-calendar-event-save {
  min-height: 44px;
  min-width: 88px;
}

.ps-calendar-event-status {
  color: rgb(100 116 139);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  margin-top: 0.375rem;
  overflow-wrap: anywhere;
}

.ps-calendar-event-status[data-kind="warning"] {
  color: rgb(161 98 7);
}

.ps-calendar-event-status[data-kind="error"] {
  color: rgb(185 28 28);
}

.ps-calendar-event-body {
  align-items: start;
  gap: 16px !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 20px 20px !important;
  scrollbar-gutter: stable;
}

.ps-calendar-event-fields,
.ps-calendar-event-context {
  gap: 0.75rem !important;
  min-width: 0;
}

.ps-calendar-event-dialog label,
.ps-calendar-event-dialog input,
.ps-calendar-event-dialog select,
.ps-calendar-event-dialog textarea,
.ps-calendar-event-dialog button,
.ps-calendar-event-dialog p {
  min-width: 0;
  max-width: 100%;
}

.ps-calendar-event-dialog label {
  gap: 0.375rem !important;
  overflow-wrap: anywhere;
}

.ps-calendar-event-dialog input:not([type="checkbox"]),
.ps-calendar-event-dialog select,
.ps-calendar-event-dialog textarea,
.ps-calendar-event-dialog button:not([aria-label="Close dialog"]) {
  min-height: 44px;
}

.ps-calendar-event-dialog button[aria-label="Close dialog"] {
  display: grid;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  place-items: center;
  right: 8px !important;
  top: 8px !important;
  width: 44px;
}

.ps-calendar-event-check-label {
  align-items: center;
  min-height: 44px;
  padding-bottom: 6px;
  padding-top: 6px;
}

.ps-calendar-event-dialog input:not([type="checkbox"]),
.ps-calendar-event-dialog select,
.ps-calendar-event-dialog textarea {
  width: 100%;
}

.ps-calendar-event-dialog textarea {
  min-height: 5.5rem !important;
  resize: vertical;
}

.ps-calendar-event-dialog input[aria-invalid="true"],
.ps-calendar-event-dialog select[aria-invalid="true"],
.ps-calendar-event-dialog textarea[aria-invalid="true"] {
  border-color: rgb(220 38 38) !important;
  box-shadow: 0 0 0 3px rgb(254 226 226) !important;
}

.ps-calendar-event-field-row {
  gap: 0.625rem !important;
}

.ps-calendar-event-field-row[data-columns="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ps-calendar-event-field-row[data-columns="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.ps-calendar-event-context > div {
  padding: 12px !important;
}

.ps-calendar-event-context > div:first-child .grid-cols-7 {
  gap: 4px !important;
}

.ps-calendar-event-context > div:first-child .grid-cols-7 button {
  height: 44px !important;
  min-height: 44px;
  min-width: 44px;
  width: 44px;
}

.ps-calendar-event-context > div:first-child button[aria-label^="Previous"],
.ps-calendar-event-context > div:first-child button[aria-label^="Next"] {
  height: 44px !important;
  min-width: 44px;
  width: 44px;
}

.ps-calendar-event-context > button {
  min-height: 44px !important;
}

.ps-calendar-event-confirmation {
  align-items: center;
  background: rgb(15 23 42 / 0.42);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1rem;
  position: absolute;
  z-index: 10;
}

.ps-calendar-event-confirmation-panel {
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.75rem;
  box-shadow: 0 24px 64px rgb(15 23 42 / 0.24);
  display: grid;
  gap: 0.75rem;
  max-width: 28rem;
  padding: 1.25rem;
  width: 100%;
}

.ps-calendar-event-confirmation-title {
  color: rgb(15 23 42);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5rem;
  margin: 0;
}

.ps-calendar-event-confirmation-description {
  color: rgb(71 85 105);
  font-size: 0.875rem;
  line-height: 1.375rem;
  margin: 0;
}

.ps-calendar-event-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.ps-calendar-event-confirmation-actions button {
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
}

.ps-calendar-event-confirmation-cancel {
  background: white;
  border: 1px solid rgb(203 213 225);
  color: rgb(51 65 85);
}

.ps-calendar-event-confirmation-confirm {
  background: rgb(185 28 28);
  border: 1px solid rgb(185 28 28);
  color: white;
}

.ps-calendar-event-announcer {
  background: rgb(6 78 59);
  border: 1px solid rgb(5 150 105);
  border-radius: 0.5rem;
  bottom: 1rem;
  box-shadow: 0 16px 40px rgb(15 23 42 / 0.2);
  color: white;
  font-size: 0.875rem;
  font-weight: 650;
  left: 50%;
  line-height: 1.375rem;
  max-width: min(32rem, calc(100vw - 2rem));
  padding: 0.75rem 1rem;
  position: fixed;
  transform: translateX(-50%);
  z-index: 70;
}

.ps-calendar-event-announcer[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .ps-calendar-event-dialog {
    max-height: calc(100dvh - 12px) !important;
    width: calc(100vw - 12px) !important;
  }

  .ps-calendar-event-form {
    max-height: calc(100dvh - 12px);
  }

  .ps-calendar-event-header {
    align-items: stretch !important;
    display: grid !important;
    padding: 16px 56px 14px 16px !important;
  }

  .ps-calendar-event-save {
    justify-self: start;
  }

  .ps-calendar-event-body {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 14px 12px 16px !important;
  }

  .ps-calendar-event-field-row[data-columns="2"],
  .ps-calendar-event-field-row[data-columns="3"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ps-calendar-event-context {
    width: 100%;
  }

  .ps-calendar-event-context > div:first-child {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .ps-calendar-event-context > div:first-child .grid-cols-7 {
    gap: 2px !important;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-calendar-event-dialog *,
  .ps-calendar-event-announcer {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .ps-calendar-event-dialog input[aria-invalid="true"],
  .ps-calendar-event-dialog select[aria-invalid="true"],
  .ps-calendar-event-dialog textarea[aria-invalid="true"] {
    outline: 3px solid Highlight;
  }

  .ps-calendar-event-confirmation {
    background: Canvas;
  }
}