/* @layer-wrapped:components */
@layer components {
/* =============================================
   Netzor SweetAlert2 — Design System Skin
   Tokens: public/css/design-system/tokens.css
   ============================================= */

/* --- Backdrop --- */
.swal2-container.netzor-swal-container {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  background: rgba(15, 23, 42, 0.36) !important;
}

/* --- Popup base --- */
.netzor-swal.swal2-popup {
  max-width: 440px !important;
  width: 440px !important;
  border-radius: var(--radius-xl) !important;
  background: radial-gradient(ellipse at 62% 0%, #f6f9ff 0%, var(--color-surface-solid) 66%) !important;
  border: 1px solid rgba(216, 228, 242, 0.92) !important;
  box-shadow:
    0 2px 4px rgba(7, 17, 31, 0.04),
    0 12px 40px rgba(7, 17, 31, 0.11),
    0 1px 0 rgba(255, 255, 255, 0.88) inset !important;
  color: var(--color-text) !important;
  font-family: var(--font-sans) !important;
  padding: 2rem 2rem 1.75rem !important;
}

/* --- Title --- */
.netzor-swal__title.swal2-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--color-text) !important;
  letter-spacing: -0.02em !important;
  font-family: var(--font-sans) !important;
  padding: 0 !important;
  margin-bottom: var(--space-2) !important;
  line-height: 1.25 !important;
}

/* --- Body --- */
.netzor-swal__body.swal2-html-container {
  font-size: 14px !important;
  font-weight: 450 !important;
  color: var(--color-text-soft) !important;
  line-height: 1.55 !important;
  font-family: var(--font-sans) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Actions --- */
.netzor-swal .swal2-actions {
  gap: 10px !important;
  margin-top: 22px !important;
  padding: 0 !important;
  justify-content: center !important;
  width: 100% !important;
}

/* =============================================
   Inputs nativos do SweetAlert2 dentro de modais Netzor
   (.swal2-input, .swal2-select, .swal2-textarea, .swal2-file)
   ============================================= */

.netzor-swal .swal2-input,
.netzor-swal .swal2-select,
.netzor-swal .swal2-textarea {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--color-border) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  color: var(--color-text) !important;
  background: var(--color-surface-solid) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.25rem 0 !important;
  box-shadow: none !important;
  transition: border-color var(--nz-transition-fast), box-shadow var(--nz-transition-fast) !important;
}

.netzor-swal .swal2-input:focus,
.netzor-swal .swal2-select:focus,
.netzor-swal .swal2-textarea:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(31, 94, 255, 0.12) !important;
}

.netzor-swal .swal2-textarea {
  min-height: 96px !important;
  resize: vertical !important;
}

.netzor-swal .swal2-file {
  border-radius: var(--radius-md) !important;
  border: 1px dashed var(--color-border) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  color: var(--color-text-soft) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.25rem 0 !important;
  background: var(--color-surface-solid) !important;
  cursor: pointer !important;
}

/* Validation message */
.netzor-swal .swal2-validation-message {
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  margin: 0.5rem 0 0 !important;
  background: rgba(212, 71, 92, 0.08) !important;
  color: var(--nz-danger) !important;
  border: none !important;
}

.netzor-swal .swal2-validation-message::before {
  background: var(--nz-danger) !important;
}

/* =============================================
   Botão auxiliar inline dentro do HTML do modal
   (ex.: "Novo grupo" em "Editar empresa")
   ============================================= */

.netzor-swal__inline-action {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 var(--space-4) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  background: var(--nz-neutral-800, #1f2937) !important;
  color: #fff !important;
  transition: filter var(--nz-transition-fast) !important;
  text-decoration: none !important;
}

.netzor-swal__inline-action:hover {
  filter: brightness(1.12) !important;
}

/* --- Close button --- */
.netzor-swal .swal2-close {
  color: var(--nz-neutral-500) !important;
  border-radius: var(--radius-sm) !important;
  transition: color var(--nz-transition-fast), background var(--nz-transition-fast) !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 18px !important;
  top: var(--space-4) !important;
  right: var(--space-4) !important;
}

.netzor-swal .swal2-close:hover {
  color: var(--nz-blue-600) !important;
  background: rgba(31, 94, 255, 0.08) !important;
}

/* =============================================
   Buttons
   ============================================= */

.netzor-swal__button {
  /* sem !important no display — o SweetAlert2 usa style="display:none" para esconder
     o deny button; !important em stylesheet sobrepõe inline style, tornando-o visível. */
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 var(--space-5) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform var(--nz-transition-fast), box-shadow var(--nz-transition-fast), filter var(--nz-transition-fast) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

.netzor-swal__button:focus {
  outline: none !important;
  box-shadow: var(--nz-intensity-light-focus) !important;
}

.netzor-swal__button:hover {
  transform: translateY(-1px) !important;
}

.netzor-swal__button:active {
  transform: translateY(0) !important;
}

/* Primary */
.netzor-swal__button--primary {
  background: linear-gradient(135deg, var(--nz-blue-600), var(--nz-blue-700)) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(31, 94, 255, 0.28) !important;
}

.netzor-swal__button--primary:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 4px 14px rgba(31, 94, 255, 0.36) !important;
  color: #ffffff !important;
}

/* Secondary */
.netzor-swal__button--secondary {
  background: var(--color-surface-solid) !important;
  border: 1px solid rgba(216, 228, 242, 0.95) !important;
  color: var(--color-text) !important;
  box-shadow: 0 1px 3px rgba(7, 17, 31, 0.06) !important;
}

.netzor-swal__button--secondary:hover {
  background: var(--color-primary-soft) !important;
  border-color: rgba(31, 94, 255, 0.2) !important;
  color: var(--color-text) !important;
}

/* Danger */
.netzor-swal__button--danger {
  background: linear-gradient(135deg, var(--nz-danger), #b83249) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(212, 71, 92, 0.28) !important;
}

.netzor-swal__button--danger:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 4px 14px rgba(212, 71, 92, 0.36) !important;
  color: #ffffff !important;
}

/* Warning */
.netzor-swal__button--warning {
  background: linear-gradient(135deg, #ffbd4a, #ffa62b) !important;
  color: var(--color-text) !important;
  box-shadow: 0 2px 8px rgba(255, 166, 43, 0.26) !important;
}

.netzor-swal__button--warning:hover {
  filter: brightness(1.05) !important;
  color: var(--color-text) !important;
}

/* =============================================
   Icons
   ============================================= */

.netzor-swal .swal2-icon {
  /* Mantemos o tamanho nativo do SweetAlert2 (80x80) para preservar o
     posicionamento absoluto dos traços do check / x-mark — eles são
     posicionados em pixels calculados para 80px e distorcem (viram um "X"
     no caso do success) se o container for reduzido. Para um visual
     mais compacto usamos transform: scale(), que reduz o conjunto todo
     proporcionalmente sem quebrar o desenho interno. */
  width: 80px !important;
  height: 80px !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
  transform: scale(0.72);
  transform-origin: center top;
}

/* Success */
.netzor-swal .swal2-icon.swal2-success {
  background: rgba(23, 166, 114, 0.12) !important;
}

.netzor-swal .swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(23, 166, 114, 0.28) !important;
}

.netzor-swal .swal2-icon.swal2-success [class*='swal2-success-line'] {
  background-color: var(--nz-success) !important;
}

.netzor-swal .swal2-icon.swal2-success .swal2-success-fix {
  background-color: transparent !important;
}

/* Error */
.netzor-swal .swal2-icon.swal2-error {
  background: rgba(212, 71, 92, 0.12) !important;
  border-color: transparent !important;
}

.netzor-swal .swal2-icon.swal2-error [class*='swal2-x-mark-line'] {
  background-color: var(--nz-danger) !important;
}

/* Warning */
.netzor-swal .swal2-icon.swal2-warning {
  background: rgba(201, 131, 24, 0.12) !important;
  border-color: transparent !important;
  color: var(--nz-warning) !important;
}

/* Info */
.netzor-swal .swal2-icon.swal2-info {
  background: rgba(31, 94, 255, 0.10) !important;
  border-color: transparent !important;
  color: var(--nz-blue-600) !important;
}

/* Question */
.netzor-swal .swal2-icon.swal2-question {
  background: rgba(31, 94, 255, 0.10) !important;
  border-color: transparent !important;
  color: var(--nz-blue-600) !important;
}

/* =============================================
   Toast
   ============================================= */

.swal2-popup.swal2-toast.netzor-toast {
  border-radius: 14px !important;
  background: var(--color-surface-solid) !important;
  border: 1px solid rgba(216, 228, 242, 0.9) !important;
  box-shadow: 0 4px 20px rgba(7, 17, 31, 0.10), 0 1px 4px rgba(7, 17, 31, 0.06) !important;
  color: var(--color-text) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 450 !important;
  padding: var(--space-3) var(--space-5) !important;
  align-items: center !important;
}

.swal2-popup.swal2-toast.netzor-toast .swal2-title {
  color: var(--color-text) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.swal2-popup.swal2-toast.netzor-toast .swal2-icon {
  width: 28px !important;
  height: 28px !important;
  margin: 0 var(--space-2) 0 0 !important;
  border: none !important;
}

.swal2-popup.swal2-toast.netzor-toast .swal2-icon.swal2-success {
  background: transparent !important;
}

.swal2-popup.swal2-toast.netzor-toast .swal2-icon.swal2-success [class*='swal2-success-line'] {
  background-color: var(--nz-success) !important;
}

.swal2-popup.swal2-toast.netzor-toast .swal2-timer-progress-bar {
  background: var(--color-primary) !important;
  border-radius: 0 0 14px 14px !important;
}

}