/* ============================================================
   /css/webhooks.css
   Estilos exclusivos da tela de Automações.
   Depende das variáveis definidas em global.css.
   ============================================================ */

.webhooks-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 18px 28px 32px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.webhooks-scroll::-webkit-scrollbar { width: 4px; }
.webhooks-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1);
  border-radius: 4px;
}

.wh-secao {
  margin-bottom: 28px;
}

.wh-card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 18px 20px;
}

.wh-card--intro {
  background: linear-gradient(180deg, rgba(91,106,245,.08), rgba(91,106,245,.03));
}

.wh-card-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #dde6ff;
}

.wh-card-dica {
  font-size: 11.5px;
  color: var(--texto-dim);
  margin-top: 12px;
  line-height: 1.55;
}

.wh-card-dica code {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  background: rgba(255,255,255,.06);
  padding: 1px 5px;
  border-radius: 4px;
  color: #a0a9ff;
}

.wh-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: .02em;
}

.wh-badge-ativo {
  background: rgba(52,216,99,.12);
  color: var(--verde);
  border: 1px solid rgba(52,216,99,.22);
}

.wh-badge-inativo {
  background: rgba(255,255,255,.06);
  color: rgba(160,175,220,.55);
  border: 1px solid rgba(255,255,255,.1);
}

.wh-btn-icone {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--borda);
  background: rgba(255,255,255,.03);
  color: rgba(180,195,240,.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s, transform .18s cubic-bezier(.34,1.56,.64,1);
}

.wh-btn-icone:hover {
  background: rgba(255,255,255,.08);
  color: #dde6ff;
  transform: scale(1.08);
}

.wh-webhooks-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.wh-webhook-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  transition: background .18s;
}

.wh-webhook-row:hover { background: rgba(20,28,58,.7); }

.wh-webhook-info {
  flex: 1;
  min-width: 0;
}

.wh-webhook-url {
  font-size: 13px;
  font-weight: 500;
  color: rgba(214,224,255,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

.wh-meta-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.wh-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  color: rgba(214,224,255,.72);
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
}


.wh-meta-pill--monitores {
  max-width: min(100%, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wh-webhook-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wh-evento-tag {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  background: rgba(91,106,245,.12);
  color: #8b97f8;
  border: 1px solid rgba(91,106,245,.22);
  padding: 2px 7px;
  border-radius: 5px;
}

.wh-webhook-acoes {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.wh-webhook-acoes .wh-btn-icone {
  width: 32px;
  height: 32px;
}

.wh-btn-adicionar-wh {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px dashed rgba(91,106,245,.3);
  background: rgba(91,106,245,.05);
  color: rgba(139,151,248,.7);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  transition: background .18s, border-color .18s, color .18s;
}

.wh-btn-adicionar-wh:hover {
  background: rgba(91,106,245,.1);
  border-color: rgba(91,106,245,.5);
  color: #8b97f8;
}

.wh-form-novo {
  margin-bottom: 28px;
}

.wh-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.wh-form-grid--filters {
  align-items: start;
}

.wh-select {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #e8eeff;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  outline: none;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(160,175,220,0.5)' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.wh-select:focus {
  border-color: rgba(91,106,245,.5);
  background-color: rgba(91,106,245,.06);
}

.wh-select option {
  background: #0d1230;
  color: #e8eeff;
}

.wh-evento-dropdown-host {
  width: 100%;
  margin-top: 8px;
}

.wh-evento-dropdown-btn {
  width: 100%;
  min-height: 44px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
}

.wh-evento-dropdown-btn:hover {
  border-color: rgba(91,106,245,.5);
  background: rgba(91,106,245,.06);
}

.wh-evento-dropdown-host .inc-filtro-menu {
  width: 100%;
}

.wh-multi-dropdown-host {
  width: 100%;
  position: relative;
  margin-top: 8px;
}

.wh-multi-dropdown-btn {
  width: 100%;
  min-height: 44px;
  justify-content: space-between;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
}

.wh-multi-dropdown-btn:hover {
  border-color: rgba(91,106,245,.5);
  background: rgba(91,106,245,.06);
}

.wh-multi-dropdown-host.aberto .inc-filtro-chevron {
  transform: rotate(180deg);
}

.wh-multi-dropdown-menu {
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  z-index: 40;
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
}

.wh-multi-opt {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wh-multi-opt input {
  accent-color: #5b6af5;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  pointer-events: none;
}

.wh-multi-opt-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wh-multi-opt-titulo {
  color: #dde6ff;
  font-size: 12.5px;
  line-height: 1.2;
}

.wh-multi-opt-subtitulo {
  color: var(--texto-dim);
  font-size: 10.5px;
  line-height: 1.3;
  word-break: break-word;
}

.wh-ajuda-campo {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--texto-dim);
}

.wh-ajuda-campo code {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: #9ea9ff;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  padding: 1px 4px;
  border-radius: 4px;
}

.wh-form-json {
  margin-bottom: 14px;
}

.wh-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wh-btn-ajuda {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(91,106,245,.35);
  background: rgba(91,106,245,.1);
  color: #9ea9ff;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s, background .18s, border-color .18s;
}

.wh-btn-ajuda:hover {
  transform: scale(1.06);
  background: rgba(91,106,245,.16);
  border-color: rgba(91,106,245,.55);
}

.wh-json-textarea {
  width: 100%;
  min-height: 170px;
  margin-top: 8px;
  padding: 12px 14px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: #dde6ff;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  line-height: 1.55;
  outline: none;
  transition: border-color .18s, background .18s;
}

.wh-json-textarea:focus {
  border-color: rgba(91,106,245,.5);
  background: rgba(91,106,245,.06);
}

.wh-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5,9,22,.72);
  backdrop-filter: blur(8px);
  z-index: 1200;
}

.wh-modal.aberto {
  display: flex;
}

.wh-modal-card {
  width: min(760px, 100%);
  max-height: min(80vh, 760px);
  overflow-y: auto;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(19,25,53,.98), rgba(13,18,41,.98));
  box-shadow: 0 28px 80px rgba(0,0,0,.42);
}

.wh-modal-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.wh-modal-topo strong {
  display: block;
  color: #eef3ff;
  font-size: 15px;
  margin-bottom: 6px;
}

.wh-modal-topo p {
  margin: 0;
  color: var(--texto-dim);
  font-size: 12px;
  line-height: 1.5;
}

.wh-placeholders-lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.wh-ph-item {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 12px;
  align-items: start;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}

.wh-ph-item code {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: #a9b2ff;
  word-break: break-word;
}

.wh-ph-item span {
  color: #d7e0ff;
  font-size: 12px;
  line-height: 1.5;
}

.wh-form-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.wh-log-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wh-log-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 9px;
  font-size: 12px;
  transition: background .15s;
}

.wh-log-row:hover { background: rgba(20,28,58,.7); }

.wh-log-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.wh-log-ts {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--texto-dim);
  flex-shrink: 0;
  width: 60px;
}

.wh-log-url {
  flex: 1;
  min-width: 120px;
  color: rgba(200,212,255,.6);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wh-log-status {
  font-family: 'Space Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.wh-log-status.ok {
  background: rgba(52,216,99,.12);
  color: var(--verde);
  border: 1px solid rgba(52,216,99,.2);
}

.wh-log-status.erro {
  background: rgba(255,69,58,.12);
  color: var(--vermelho);
  border: 1px solid rgba(255,69,58,.2);
}

.wh-log-meta-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--texto-dim);
  font-size: 11px;
  font-family: 'Space Mono', monospace;
}

.wh-log-toggle {
  border: 1px solid rgba(91,106,245,.24);
  background: rgba(91,106,245,.08);
  color: #aab4ff;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 10.5px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}

.wh-log-toggle:hover {
  background: rgba(91,106,245,.14);
  border-color: rgba(91,106,245,.42);
  color: #d9e1ff;
}

.wh-log-detalhe {
  width: 100%;
  color: #c8d4ff;
  font-size: 11.5px;
  line-height: 1.5;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 8px 10px;
  word-break: break-word;
  white-space: pre-wrap;
  overflow-x: auto;
  margin: 0;
}

@media (max-width: 900px) {
  .wh-form-grid { grid-template-columns: 1fr; }
  .wh-log-topo { flex-wrap: wrap; }
}

@media (max-width: 700px) {
  .webhooks-scroll { padding: 14px 16px 24px; }

  .wh-card,
  .wh-webhook-row,
  .wh-log-row {
    padding-left: 14px;
    padding-right: 14px;
  }

  .wh-webhook-row {
    flex-direction: column;
    align-items: stretch;
  }

  .wh-webhook-acoes {
    width: 100%;
    justify-content: flex-end;
  }

  .wh-form-acoes {
    flex-direction: column-reverse;
  }

  .wh-form-acoes .btn-cancel,
  .wh-form-acoes .btn-submit {
    width: 100%;
    justify-content: center;
  }

  .wh-ph-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .wh-log-ts { width: auto; }
  .wh-log-url { min-width: 0; width: 100%; }
}

@media (max-width: 520px) {
  .webhooks-scroll { padding: 12px 12px 20px; }
  .wh-card--intro { padding: 16px; }
  .wh-btn-adicionar-wh { padding: 10px 14px; }

  .wh-log-meta-extra {
    flex-direction: column;
    gap: 6px;
  }

  .wh-log-detalhe {
    font-size: 11px;
    padding: 7px 9px;
  }
}