.text-green-500{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}

/* Custom width classes for DNS table layout */
.w-48{
  width: 12rem; /* 192px */
}

.sidebar-selected-item {
  background-color: rgba(73, 25, 25)!important;
  border-radius: 0px 0.75rem 0.75rem 0px!important;
  border-left: 4px solid #f23636!important;
  transition: background-color 0.1s ease-in-out!important;
}

.sidebar-hover:hover {
  background-color: rgba(73, 25, 25)!important;
  border-radius: 0px 0.75rem 0.75rem 0px!important;
  border-left: 4px solid #f23636!important;
  transition: background-color 0.1s ease-in-out!important;
}

.sidebar-item {
  border-left: 4px solid transparent!important;
}

.magic-button {
  border: 1px solid #f23636!important;
}

.magic-button:hover {
  border: 1px solid transparent!important;
}

/* HTMX Inline Validation Styles */
.error-message {
  color: #ef4444; /* red-500 */
  font-size: 0.875rem; /* text-sm */
  margin-top: 0.25rem; /* mt-1 */
}

.error input,
.error select,
.error textarea {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1), 0 0 0 1px #ef4444; /* red-500 with opacity */
  border-color: #ef4444; /* red-500 */
}

.valid input,
.valid select,
.valid textarea {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1), 0 0 0 1px #22c55e; /* green-500 with opacity */
  border-color: #22c55e; /* green-500 */
}

/* HTMX indicator styles */
.htmx-indicator {
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Smooth transitions for validation states */
.error input,
.error select,
.error textarea,
.valid input,
.valid select,
.valid textarea {
  transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Disabled button styles */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn:disabled:hover {
  background-color: inherit;
  color: inherit;
}