/**
 * Zyareo theme overrides for SweetAlert2 — matches Hub admin tokens.
 */
.zy-swal-popup {
  font-family: var(--zy-font-sans);
  background: var(--zy-white);
  color: var(--zy-text);
  border: 1px solid var(--zy-border);
  border-radius: var(--zy-radius-xl);
  box-shadow: var(--zy-shadow-lg);
  padding: var(--zy-space-5) var(--zy-space-5) var(--zy-space-4);
  width: min(28rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
}

.zy-swal-title {
  font-family: var(--zy-font-display);
  font-size: var(--zy-text-xl);
  font-weight: var(--zy-weight-semibold);
  color: var(--zy-charcoal);
  margin: 0 0 var(--zy-space-3);
  padding: 0;
}

.zy-swal-html {
  font-size: var(--zy-text-sm);
  line-height: var(--zy-leading-relaxed);
  color: var(--zy-text);
  text-align: left;
  margin: 0;
  padding: 0;
}

.zy-swal-device-msg {
  margin: 0 0 var(--zy-space-4);
}

.zy-swal-device-name {
  display: block;
  font-size: var(--zy-text-lg);
  font-weight: var(--zy-weight-semibold);
  color: var(--zy-charcoal);
  margin-bottom: var(--zy-space-1);
}

.zy-swal-warning-callout {
  margin: 0;
  padding: var(--zy-space-3);
  border-radius: var(--zy-radius-md);
  background: var(--zy-warning-soft);
  border: 1px solid color-mix(in srgb, var(--zy-warning) 35%, var(--zy-border));
  color: var(--zy-text);
  font-size: var(--zy-text-sm);
}

.zy-swal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--zy-space-2);
  margin-top: var(--zy-space-5);
  width: 100%;
}

.zy-swal-actions .btn {
  min-width: 7.5rem;
  margin: 0;
}

.zy-swal-btn-danger {
  background: var(--zy-error);
  border-color: var(--zy-error);
  color: var(--zy-white);
}

.zy-swal-btn-danger:hover:not(:disabled) {
  filter: brightness(0.92);
}

.zy-swal-btn-cancel {
  background: transparent;
}

/*
 * The cancellation reason field.
 *
 * SweetAlert's own input is 100% wide AND carries 2em of lateral margin, so
 * inside the themed popup's padding it was wider than the dialog: on a phone
 * the box ran off the right edge and the text scrolled out of sight while it
 * was being typed. Full width, border-box, no lateral margin, and 16px so iOS
 * does not zoom the page when it is focused.
 */
.zy-swal-popup .swal2-input,
.zy-swal-popup .swal2-textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: var(--zy-space-2) 0 0;
  padding: 0.65rem 0.75rem;
  min-height: 2.75rem;
  font-family: inherit;
  font-size: max(1rem, var(--zy-text-sm));
  color: var(--zy-text);
  background: var(--zy-white);
  border: 1px solid var(--zy-border);
  border-radius: var(--zy-radius-md);
  box-shadow: none;
}

.zy-swal-popup .swal2-textarea {
  min-height: 5rem;
  resize: vertical;
}

.zy-swal-popup .swal2-input:focus,
.zy-swal-popup .swal2-textarea:focus {
  outline: 2px solid var(--zy-emerald);
  outline-offset: 1px;
  border-color: var(--zy-emerald);
}

.zy-swal-popup .swal2-input-label {
  display: block;
  justify-content: flex-start;
  margin: var(--zy-space-3) 0 0;
  padding: 0;
  text-align: left;
  font-size: var(--zy-text-sm);
  font-weight: var(--zy-weight-medium);
  color: var(--zy-charcoal);
  /* A long label wraps rather than pushing the dialog wider. */
  overflow-wrap: anywhere;
}

/* Nothing in the dialog may reach past its own edge. */
.zy-swal-popup .swal2-html-container {
  overflow-x: hidden;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 0;
}

.zy-swal-validation {
  font-size: var(--zy-text-sm);
  color: var(--zy-error);
  margin-top: var(--zy-space-3);
}

.zy-swal-icon {
  margin: 0 auto var(--zy-space-3);
  border-color: var(--zy-warning);
  color: var(--zy-warning);
}

.zy-swal-close {
  color: var(--zy-text-muted);
}

div:where(.swal2-container) {
  z-index: calc(var(--zy-z-modal, 400) + 50);
}

@media (max-width: 480px) {
  /* The dialog scrolls inside itself on a short phone screen, so the reason
     field and both buttons stay reachable with the keyboard open. */
  .zy-swal-popup {
    padding: var(--zy-space-4);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
  }

  .zy-swal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .zy-swal-actions .btn {
    width: 100%;
    min-width: 0;
  }
}