/*
  Ajuste visual isolado para modais de Contatos e Campanhas.
  Nao altera estrutura funcional, eventos, payloads, rotas ou APIs.
*/

:root {
  --apm-ink: #0f172a;
  --apm-muted: #64748b;
  --apm-line: #dbe7e6;
  --apm-line-strong: #c8d8d6;
  --apm-surface: #ffffff;
  --apm-soft: #f7fbfa;
  --apm-soft-2: #eef8f6;
  --apm-accent: #0f766e;
  --apm-accent-hover: #115e59;
  --apm-danger: #dc2626;
  --apm-shadow: 0 24px 70px rgba(15, 23, 42, .22);
  --apm-radius: 16px;
}

/* Modal Novo/Editar Contato */
.fixed.inset-0.z-50.backdrop-blur-sm:has([role="dialog"][aria-labelledby="form-title"] #telefone) {
  background: rgba(2, 6, 23, .50) !important;
  backdrop-filter: blur(10px);
  padding: 20px !important;
  z-index: 10020 !important;
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) {
  width: min(560px, calc(100vw - 32px)) !important;
  max-width: none !important;
  max-height: min(88dvh, 760px);
  overflow: auto;
  padding: 0 !important;
  border: 1px solid var(--apm-line) !important;
  border-radius: var(--apm-radius) !important;
  box-shadow: var(--apm-shadow) !important;
  background: var(--apm-surface) !important;
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) > div:first-child {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 0 !important;
  padding: 20px 22px;
  text-align: left !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfb 100%);
  border-bottom: 1px solid var(--apm-line);
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) > div:first-child > div:first-child {
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%) !important;
  box-shadow: 0 10px 24px rgba(15, 118, 110, .22);
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) > div:first-child svg {
  width: 22px !important;
  height: 22px !important;
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) #form-title {
  font-size: 1.28rem !important;
  line-height: 1.25 !important;
  color: var(--apm-ink) !important;
  letter-spacing: 0 !important;
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) #form-title + p {
  margin-top: 4px !important;
  color: var(--apm-muted) !important;
  font-size: .9rem !important;
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) form {
  padding: 20px 22px 0;
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) form.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 14px !important;
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) label {
  color: #334155 !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  margin-bottom: 7px !important;
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) .input-field {
  min-height: 44px;
  border: 1px solid var(--apm-line-strong) !important;
  border-radius: 11px !important;
  background: #fbfefd !important;
  color: var(--apm-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) textarea.input-field {
  min-height: 104px;
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) .input-field:focus {
  border-color: rgba(15, 118, 110, .62) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .12) !important;
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) form > div.flex.gap-4.pt-6 {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 18px -22px 0 !important;
  padding: 14px 22px 18px !important;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--apm-line);
  backdrop-filter: blur(8px);
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) button {
  min-height: 44px;
  border-radius: 11px !important;
  font-weight: 700 !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) button:hover {
  transform: translateY(-1px);
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) .btn-primary {
  background: linear-gradient(135deg, var(--apm-accent), #2563eb) !important;
  box-shadow: 0 12px 26px rgba(15, 118, 110, .22) !important;
}

[role="dialog"][aria-labelledby="form-title"]:has(#telefone) .btn-primary:hover {
  background: linear-gradient(135deg, var(--apm-accent-hover), #1d4ed8) !important;
}

/* Modal Nova Campanha */
.fixed.inset-0.z-30.p-4:has(> .max-w-6xl h3) {
  background: rgba(2, 6, 23, .54) !important;
  backdrop-filter: blur(10px);
  padding: 20px !important;
  z-index: 10020 !important;
}

.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;
  flex-direction: column;
  overflow: hidden !important;
  border: 1px solid var(--apm-line) !important;
  border-radius: var(--apm-radius) !important;
  box-shadow: var(--apm-shadow) !important;
  background: var(--apm-surface) !important;
}

.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > div:first-child {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 18px 22px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfb 100%) !important;
  border-bottom: 1px solid var(--apm-line) !important;
}

.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl h3 {
  color: var(--apm-ink) !important;
  font-size: 1.22rem !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl h3 + p {
  color: var(--apm-muted) !important;
  margin-top: 4px !important;
}

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

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

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

.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form > .grid {
  gap: 22px !important;
}

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

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

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

.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form input:not([type="checkbox"]):not([type="radio"]),
.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 {
  border: 1px solid var(--apm-line-strong) !important;
  border-radius: 11px !important;
  background-color: #ffffff !important;
  color: var(--apm-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 42px;
}

.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form textarea {
  min-height: 98px;
}

.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 {
  border-color: rgba(15, 118, 110, .62) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .12) !important;
}

.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(--apm-accent);
}

.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-color: var(--apm-line) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--apm-soft) 100%) !important;
  border-radius: 13px !important;
}

.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .bg-blue-50 h4,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .bg-purple-50 h4,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .bg-green-50 h4 {
  color: var(--apm-ink) !important;
  font-size: .98rem !important;
  line-height: 1.35 !important;
}

.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .max-h-40.overflow-y-auto {
  max-height: 172px !important;
  border-color: var(--apm-line) !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  padding: 10px !important;
}

.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 {
  border-radius: 11px !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .max-h-40.overflow-y-auto label:hover,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form label.border.rounded-lg:hover {
  background: var(--apm-soft) !important;
  border-color: var(--apm-line-strong) !important;
}

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

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

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

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

.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 {
  background: linear-gradient(135deg, var(--apm-accent), #2563eb) !important;
  box-shadow: 0 10px 22px rgba(15, 118, 110, .18);
}

.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form button.bg-blue-600:hover,
.fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form button.bg-green-600:hover {
  background: linear-gradient(135deg, var(--apm-accent-hover), #1d4ed8) !important;
}

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

/* Modal Editar Campanha em andamento */
#campaign-edit-running-modal {
  background: rgba(2, 6, 23, .62) !important;
  backdrop-filter: blur(10px);
  padding: 20px !important;
}

#campaign-edit-running-modal > div {
  width: min(920px, calc(100vw - 40px)) !important;
  max-height: calc(100dvh - 40px) !important;
  padding: 0 !important;
  overflow: auto !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  border-radius: var(--apm-radius) !important;
  background: #0b1220 !important;
  box-shadow: var(--apm-shadow) !important;
}

#campaign-edit-running-modal > div > div:first-child {
  position: sticky !important;
  top: 0;
  z-index: 5;
  margin: 0 !important;
  padding: 16px 18px !important;
  background: rgba(11, 18, 32, .96);
  border-bottom: 1px solid rgba(148, 163, 184, .24);
  backdrop-filter: blur(8px);
}

#campaign-edit-running-modal > div > div:not(:first-child):not(:last-child),
#campaign-edit-running-modal > div > label,
#campaign-edit-running-modal > div > select,
#campaign-edit-running-modal > div > textarea,
#campaign-edit-running-modal > div > input {
  margin-left: 18px !important;
  margin-right: 18px !important;
}

#campaign-edit-running-modal input:not([type="checkbox"]):not([type="radio"]),
#campaign-edit-running-modal select,
#campaign-edit-running-modal textarea {
  min-height: 40px;
  border: 1px solid rgba(148, 163, 184, .36) !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, .92) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

#campaign-edit-running-modal textarea {
  min-height: 94px;
}

#campaign-edit-running-modal input:focus,
#campaign-edit-running-modal select:focus,
#campaign-edit-running-modal textarea:focus {
  outline: none !important;
  border-color: rgba(45, 212, 191, .7) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .12) !important;
}

#campaign-edit-running-modal button {
  min-height: 38px;
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

#campaign-edit-running-modal button:hover {
  transform: translateY(-1px);
}

#campaign-edit-running-modal #cer-close,
#campaign-edit-running-modal #cer-cancel {
  border: 1px solid rgba(148, 163, 184, .35) !important;
  background: rgba(15, 23, 42, .92) !important;
  color: #e2e8f0 !important;
}

#campaign-edit-running-modal #cer-save,
#campaign-edit-running-modal #cer-sync-contacts {
  border: 1px solid rgba(45, 212, 191, .35) !important;
  background: linear-gradient(135deg, #0f766e, #2563eb) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(15, 118, 110, .2);
}

#campaign-edit-running-modal > div > div:last-child {
  position: sticky !important;
  bottom: 0;
  z-index: 5;
  margin: 16px 0 0 !important;
  padding: 14px 18px !important;
  background: rgba(11, 18, 32, .96);
  border-top: 1px solid rgba(148, 163, 184, .24);
  backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
  .fixed.inset-0.z-50.backdrop-blur-sm:has([role="dialog"][aria-labelledby="form-title"] #telefone) {
    align-items: stretch !important;
    padding: 8px !important;
  }

  [role="dialog"][aria-labelledby="form-title"]:has(#telefone) {
    width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 14px !important;
  }

  [role="dialog"][aria-labelledby="form-title"]:has(#telefone) > div:first-child {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px;
    padding: 15px 16px;
  }

  [role="dialog"][aria-labelledby="form-title"]:has(#telefone) > div:first-child > div:first-child {
    width: 40px !important;
    height: 40px !important;
  }

  [role="dialog"][aria-labelledby="form-title"]:has(#telefone) #form-title {
    font-size: 1.08rem !important;
  }

  [role="dialog"][aria-labelledby="form-title"]:has(#telefone) form {
    padding: 16px 16px 0;
  }

  [role="dialog"][aria-labelledby="form-title"]:has(#telefone) form > div.flex.gap-4.pt-6 {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  [role="dialog"][aria-labelledby="form-title"]:has(#telefone) form > div.flex.gap-4.pt-6 button {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .fixed.inset-0.z-30.p-4:has(> .max-w-6xl h3) {
    align-items: stretch !important;
    padding: 6px !important;
  }

  .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;
  }

  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > div:first-child {
    padding: 14px 15px !important;
    gap: 10px !important;
  }

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

  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > div:first-child button {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

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

  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form > .grid {
    gap: 16px !important;
  }

  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form input:not([type="checkbox"]):not([type="radio"]),
  .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;
  }

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

  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form .flex.justify-between.items-center > p {
    min-width: 0;
  }

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

  .fixed.inset-0.z-30.p-4 > .bg-white.max-w-6xl > form > div:last-child button {
    width: 100%;
  }

  #campaign-edit-running-modal {
    align-items: stretch !important;
    padding: 6px !important;
  }

  #campaign-edit-running-modal > div {
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 14px !important;
  }

  #campaign-edit-running-modal > div > div:first-child {
    padding: 14px 15px !important;
  }

  #campaign-edit-running-modal [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  #campaign-edit-running-modal > div > div:not(:first-child):not(:last-child),
  #campaign-edit-running-modal > div > label,
  #campaign-edit-running-modal > div > select,
  #campaign-edit-running-modal > div > textarea,
  #campaign-edit-running-modal > div > input {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }

  #campaign-edit-running-modal input:not([type="checkbox"]):not([type="radio"]),
  #campaign-edit-running-modal select,
  #campaign-edit-running-modal textarea {
    font-size: 16px !important;
  }

  #campaign-edit-running-modal > div > div:last-child {
    padding: 12px 15px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  #campaign-edit-running-modal > div > div:last-child button {
    width: 100%;
  }
}