.edit_milestone.form>:not([hidden])~:not([hidden]) {
  margin-bottom: 0.5rem;
  margin-top: 0.375rem;
}

.form_group .iti {
  display: block;
}

.simple_form .required.label:after {
  content: '*';
}

.simple_form .button__remove_new.button__remove_prerendered {
  display: none;
}

/* We should replace this with something that doesn't clash with tailwind's hidden class */
.simple_form .hidden {
  display: none;
}

details[open] summary > .fluent {
  transform: rotate(90deg);
}

/* Signature Modal Error Styles */
.signature-canvas-container {
  transition: border-color 0.2s ease-in-out;
  position: relative;
}

.signature-canvas-container.border-red-500 {
  border: 3px solid #dc2626 !important;
  border-radius: 0.5rem;
  padding: 2px;
  box-shadow: 0 0 0 1px #dc2626;
}

/* Make canvas border red when there's an error */
.signature-canvas-container.border-red-500 canvas {
  border-color: #dc2626 !important;
  border-width: 2px !important;
}

/* Error message positioning and styling */
[data-signature-modal-target="drawError"] {
  @apply absolute top-0 left-0 right-0 z-10;
  margin-top: -1px;
  margin-left: -1px;
  margin-right: -1px;
}

[data-signature-modal-target="typeError"] {
  @apply mt-2;
}

[data-signature-modal-target="generalError"] {
  @apply mb-4;
}

[data-signature-modal-target="generalError"] .p-3 {
  @apply p-3 bg-red-50 border border-red-200 rounded-md;
}

[data-signature-modal-target="generalError"] p {
  @apply text-sm text-red-800;
}

/* Enhanced error message styling */
[data-signature-modal-target="drawError"] .bg-red-100,
[data-signature-modal-target="typeError"] .bg-red-100 {
  background-color: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
  font-weight: 500;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Ensure error messages are always visible */
[data-signature-modal-target*="Error"]:not(.hidden) {
  display: flex !important;
}

/* Error message animations */
[data-signature-modal-target*="Error"] {
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

[data-signature-modal-target*="Error"]:not(.hidden) {
  animation: slideInError 0.2s ease-out;
}

@keyframes slideInError {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Input error state transitions */
input[data-signature-modal-target="typeInput"] {
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

input[data-signature-modal-target="typeInput"].border-red-500 {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}