:root {
  --h360-popup-ink: #18322b;
  --h360-popup-muted: #52675f;
  --h360-popup-line: #dce7df;
  --h360-popup-surface: #f5f8f6;
  --h360-popup-action: #205039;
  --h360-popup-shade: rgb(9 28 22 / 62%);
  --h360-popup-shadow: 0 24px 68px rgb(6 21 15 / 30%);
}

/* SweetAlert is also used inside an open medication dialog. */
body .swal2-container { z-index: 20000; }
body .swal2-container.swal2-backdrop-show { background: var(--h360-popup-shade); }

.swal2-container .swal2-popup {
  border: 1px solid var(--h360-popup-line);
  background: #fff;
  color: var(--h360-popup-ink);
  box-shadow: var(--h360-popup-shadow);
}

.swal2-container .swal2-popup:not(.swal2-toast) {
  width: min(100%, 26rem);
  padding: clamp(20px, 5vw, 28px);
  border-radius: 18px;
}

.swal2-container .swal2-popup.swal2-toast {
  padding: 10px 14px;
  border-radius: 12px;
}

.swal2-popup:not(.swal2-toast) .swal2-icon {
  margin: 0 0 16px;
  font-size: 9px;
}

.swal2-popup:not(.swal2-toast) .swal2-icon:is(.swal2-warning, .swal2-error, .swal2-info, .swal2-question) {
  border: 0;
  border-radius: 12px;
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-warning { background: #fff2d9; color: #895009; }
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error { background: #fbe9e6; color: #a33d36; }
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-info { background: #e3f1fb; color: #215a80; }
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-question { background: #e5f0e9; color: #2b654b; }
.swal2-popup .swal2-error :is(.swal2-x-mark-line-left, .swal2-x-mark-line-right) { background-color: currentColor; }

.swal2-popup:not(.swal2-toast) .swal2-title {
  padding: 0;
  font-size: clamp(22px, 5vw, 26px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.025em;
  text-align: start;
}

.swal2-popup:not(.swal2-toast) .swal2-html-container {
  margin-top: 8px;
  padding: 0;
  color: var(--h360-popup-muted);
  font-size: 15px;
  line-height: 1.55;
  text-align: start;
}

.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select {
  width: 100%;
  margin: 14px 0 0;
  border: 1px solid #a9bcb1;
  border-radius: 9px;
  font-size: 15px;
}

.swal2-popup .swal2-validation-message {
  margin-inline: 0;
  border-radius: 8px;
  background: #fbe9e6;
  color: #84332d;
}

.swal2-popup:not(.swal2-toast) .swal2-actions {
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  margin: 22px 0 0;
}

.swal2-popup .swal2-actions .swal2-styled {
  min-height: 44px;
  margin: 0;
  padding: 9px 17px;
  border: 1px solid transparent;
  border-radius: 9px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.swal2-popup .swal2-actions .swal2-confirm { min-width: 104px; background: var(--h360-popup-action); }
.swal2-popup .swal2-actions .swal2-cancel { border-color: var(--h360-popup-line); background: var(--h360-popup-surface); color: var(--h360-popup-ink); }
.swal2-popup .swal2-actions .swal2-deny { background: #a33d36; }

.swal2-popup .swal2-actions .swal2-styled:focus-visible {
  outline: 2px solid #27724c;
  outline-offset: 2px;
  box-shadow: none;
}

/* Shared finish for the larger application forms, with their own layouts. */
body :is(.h360-modal-backdrop, .fin-modal-backdrop, .employee-modal-backdrop,
  .training-modal-backdrop, .modal-backdrop, .dash-backdrop) {
  background: var(--h360-popup-shade) !important;
  backdrop-filter: blur(3px);
}

.med-dialog::backdrop { background: var(--h360-popup-shade); }

body :is(.h360-modal, .fin-modal, .employee-modal, .training-modal,
  .modal-box, .dash-dialog, .med-dialog) {
  border: 1px solid var(--h360-popup-line);
  border-radius: 18px !important;
  box-shadow: var(--h360-popup-shadow) !important;
}

:is(body, #pageApp, #pageapp) :is(.h360-modal-head, .h360-modal-header, .fin-modal-head,
  .employee-modal-header, .training-modal-header, .modal-header, .dash-dialog > header, .med-dialog > header) {
  border-bottom-color: var(--h360-popup-line);
  background: var(--h360-popup-surface);
  color: var(--h360-popup-ink);
}

:is(body, #pageApp, #pageapp) :is(.h360-modal-foot, .h360-modal-footer, .fin-modal-foot,
  .employee-modal-footer, .training-modal-footer, .modal-footer, .care-modal-footer,
  .dash-dialog > footer, .med-dialog > footer) {
  flex-wrap: wrap;
  border-top-color: var(--h360-popup-line);
  background: var(--h360-popup-surface);
}

@media (max-width: 680px) {
  body :is(.h360-modal, .fin-modal, .training-modal, .modal-box) {
    border-radius: 18px 18px 0 0 !important;
  }
}

@media (max-width: 480px) {
  .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .swal2-container .swal2-popup.swal2-show:not(.swal2-toast) {
    animation: h360-popup-enter .2s ease-out both;
  }
}

@keyframes h360-popup-enter {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}