/*
  Repaginacao visual isolada do modal Nova/Editar Campanha.
  Nao altera campos, eventos, payloads, upload, IA, agendamento ou criacao.
*/

:root {
  --acm-ink: #0f172a;
  --acm-muted: #64748b;
  --acm-line: #dbe7e6;
  --acm-line-strong: #c8d8d6;
  --acm-soft: #f7fbfa;
  --acm-soft-2: #eef8f6;
  --acm-accent: #0f766e;
  --acm-blue: #2563eb;
  --acm-shadow: 0 28px 80px rgba(15, 23, 42, .24);
}

.auto-campaign-modal-backdrop,
.fixed.inset-0.z-30.p-4:has(> .max-w-6xl h3) {
  background: rgba(2, 6, 23, .58) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 10030 !important;
}

.auto-campaign-modal,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl {
  width: min(1180px, calc(100vw - 40px)) !important;
  max-width: none !important;
  max-height: calc(100dvh - 40px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(219, 231, 230, .95) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: var(--acm-shadow) !important;
}

.auto-campaign-modal > div:first-child,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > div:first-child {
  flex: 0 0 auto !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--acm-line) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfb 100%) !important;
}

.auto-campaign-modal h3,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl h3 {
  color: var(--acm-ink) !important;
  font-size: 1.22rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

.auto-campaign-modal h3 + p,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl h3 + p {
  margin-top: 4px !important;
  color: var(--acm-muted) !important;
  font-size: .88rem !important;
  line-height: 1.45 !important;
}

.auto-campaign-modal > div:first-child button,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > div:first-child button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--acm-line) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #475569 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
}

.auto-campaign-modal > div:first-child button:hover,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > div:first-child button:hover {
  border-color: var(--acm-line-strong) !important;
  background: var(--acm-soft) !important;
  color: var(--acm-ink) !important;
}

.auto-campaign-modal > form,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 22px !important;
  background: #fbfefd !important;
}

.auto-campaign-modal > form > .grid,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form > .grid {
  gap: 22px !important;
  align-items: start !important;
}

.auto-campaign-modal > form > .grid > div,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form > .grid > div {
  min-width: 0 !important;
}

.auto-campaign-modal > form .bg-blue-50,
.auto-campaign-modal > form .bg-purple-50,
.auto-campaign-modal > form .bg-green-50,
.auto-campaign-modal > form .bg-yellow-50,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .bg-blue-50,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .bg-purple-50,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .bg-green-50,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .bg-yellow-50 {
  border: 1px solid var(--acm-line) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--acm-soft) 100%) !important;
  color: var(--acm-ink) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .045) !important;
}

.auto-campaign-modal > form h4,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form h4 {
  color: var(--acm-ink) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.auto-campaign-modal > form label,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form label {
  color: #334155 !important;
  font-weight: 750 !important;
}

.auto-campaign-modal > form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.auto-campaign-modal > form select,
.auto-campaign-modal > form textarea,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form select,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form textarea {
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid var(--acm-line-strong) !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  color: var(--acm-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.auto-campaign-modal > form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.auto-campaign-modal > form select,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form select {
  min-height: 44px !important;
}

.auto-campaign-modal > form textarea,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form textarea {
  min-height: 96px !important;
}

.auto-campaign-modal > form input:focus,
.auto-campaign-modal > form select:focus,
.auto-campaign-modal > form textarea:focus,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form input:focus,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form select:focus,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form textarea:focus {
  outline: none !important;
  border-color: rgba(15, 118, 110, .62) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .12) !important;
}

.auto-campaign-modal > form input[type="checkbox"],
.auto-campaign-modal > form input[type="radio"],
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form input[type="checkbox"],
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form input[type="radio"] {
  accent-color: var(--acm-accent) !important;
}

.auto-campaign-modal > form .max-h-40.overflow-y-auto,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .max-h-40.overflow-y-auto {
  max-height: 174px !important;
  border: 1px solid var(--acm-line) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  padding: 10px !important;
}

.auto-campaign-modal > form .max-h-40.overflow-y-auto label,
.auto-campaign-modal > form label.border.rounded-lg,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .max-h-40.overflow-y-auto label,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form label.border.rounded-lg {
  min-width: 0 !important;
  border-radius: 11px !important;
}

.auto-campaign-modal > form .border.border-gray-200.rounded-lg.p-4,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .border.border-gray-200.rounded-lg.p-4 {
  border: 1px solid var(--acm-line) !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .055) !important;
}

.auto-campaign-modal > form .border.border-dashed,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .border.border-dashed {
  border-color: var(--acm-line-strong) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--acm-soft) 100%) !important;
}

.auto-campaign-modal > form button,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form button {
  border-radius: 11px !important;
  font-weight: 750 !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease !important;
}

.auto-campaign-modal > form button:hover,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form button:hover {
  transform: translateY(-1px) !important;
}

.auto-campaign-modal > form button.bg-blue-600,
.auto-campaign-modal > form button.bg-green-600,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form button.bg-blue-600,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form button.bg-green-600 {
  border: 1px solid rgba(20, 184, 166, .30) !important;
  background: linear-gradient(135deg, var(--acm-accent), var(--acm-blue)) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(15, 118, 110, .18) !important;
}

.auto-campaign-modal > form > div:last-child,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form > div:last-child {
  position: sticky !important;
  bottom: -22px !important;
  z-index: 5 !important;
  margin: 22px -22px -22px !important;
  padding: 16px 22px !important;
  border-top: 1px solid var(--acm-line) !important;
  background: rgba(255, 255, 255, .96) !important;
  backdrop-filter: blur(8px) !important;
}

#campaign-edit-running-modal > div {
  border-radius: 18px !important;
}

@media (max-width: 768px) {
  .auto-campaign-modal-backdrop,
  .fixed.inset-0.z-30.p-4:has(> .max-w-6xl h3) {
    align-items: stretch !important;
    padding: 6px !important;
  }

  .auto-campaign-modal,
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl {
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 14px !important;
  }

  .auto-campaign-modal > div:first-child,
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > div:first-child {
    grid-template-columns: minmax(0, 1fr) 40px !important;
    gap: 10px !important;
    padding: 14px 15px !important;
  }

  .auto-campaign-modal h3,
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl h3 {
    font-size: 1.08rem !important;
  }

  .auto-campaign-modal h3 + p,
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl h3 + p {
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }

  .auto-campaign-modal > form,
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form {
    padding: 15px !important;
  }

  .auto-campaign-modal > form > .grid,
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form > .grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .auto-campaign-modal > form .space-y-6 > :not([hidden]) ~ :not([hidden]),
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 14px !important;
  }

  .auto-campaign-modal > form .max-h-40.overflow-y-auto,
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .max-h-40.overflow-y-auto {
    max-height: min(220px, 28dvh) !important;
  }

  .auto-campaign-modal > form .flex.justify-between.items-center,
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .flex.justify-between.items-center {
    gap: 10px !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .auto-campaign-modal > form .flex.justify-between.items-center > p,
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .flex.justify-between.items-center > p {
    width: 100% !important;
    min-width: 0 !important;
  }

  .auto-campaign-modal > form .flex.gap-2,
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .flex.gap-2 {
    min-width: 0 !important;
  }

  .auto-campaign-modal > form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .auto-campaign-modal > form select,
  .auto-campaign-modal > form textarea,
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form select,
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form textarea {
    font-size: 16px !important;
  }

  .auto-campaign-modal > form input[type="file"],
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form input[type="file"] {
    max-width: 100% !important;
  }

  .auto-campaign-modal > form > div:last-child,
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form > div:last-child {
    bottom: -15px !important;
    margin: 16px -15px -15px !important;
    padding: 12px 15px calc(12px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .auto-campaign-modal > form > div:last-child button,
  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form > div:last-child button {
    width: 100% !important;
    min-height: 44px !important;
  }
}