#tblOptions {
  width: 100%;
}

#tblOptions th,
#tblOptions td {
  white-space: nowrap;
}

@media (max-width: 576px) {
  #tblOptions th,
  #tblOptions td {
    white-space: normal;
  }
}

/* Dark mode */
body.dark-mode {
  background-color: #121212;
  color: #f8f9fa;
}

body.dark-mode .navbar {
  background-color: #212529 !important;
}

body.dark-mode .card {
  background-color: #343a40;
  color: #f8f9fa;
  border-color: #454d55;
}

/* Accessibility enhancements */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}


/* Badges for integrations */
.badge-env-prod {
  background-color: #0d6efd;
}

.badge-env-sandbox {
  background-color: #6c757d;
}

.badge-status-active {
  background-color: #198754;
}

.badge-status-paused {
  background-color: #ffc107;
  color: #212529;
}

.badge-created {
  background-color: #0dcaf0;
  color: #212529;
}

/* Ensure integration dropdown options remain fully visible */
#integrationSelect {
  width: auto;
  min-width: 100%;
}

#integrationSelect option {
  white-space: normal;
  overflow-wrap: anywhere;

}

/* ========================== EDIT MODAL: FIX FINAL ========================== */

/* 1) O dialogo ocupa o viewport (menos margem mínima) */
#editIntegrationModal .modal-dialog {
  height: calc(100dvh - 1rem);
  margin: 0.5rem auto;
  display: flex;
  flex-direction: column;
}

/* 2) O conteúdo é um flex container em coluna */
#editIntegrationModal .modal-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0; /* essencial para overflow funcionar */
}

/* 3) Header e Footer fixos dentro da modal */
#editIntegrationModal .modal-header,
#editIntegrationModal .modal-footer {
  flex: 0 0 auto;
  background-color: var(--bs-body-bg);
  z-index: 2;
}

/* 4) O body é a única parte que rola */
#editIntegrationModal .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-bottom: 1rem;
  min-height: 0;
}

/* 5) Footer visível e nunca “sumindo” */
#editIntegrationModal .modal-footer {
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  flex-wrap: wrap;
  gap: .5rem;
}

/* 6) Ajuste adicional pra telas muito baixas */
@media (max-height: 720px) {
  #editIntegrationModal .modal-dialog {
    height: calc(100dvh - 0.5rem);
  }
}