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

/* .simple_form .hidden (above) has the same specificity as Tailwind's own
   `md:flex`/`md:block`, and its later position in the compiled CSS keeps it
   winning even when the responsive breakpoint matches. This override is scoped
   to organisms--nested-form's remove button so the desktop control can actually
   show, without touching the general `.simple_form .hidden` rule other forms rely on. */
[data-organisms--nested-form-target='removeButton'] .mobile-hidden {
  display: none;
}

@media (min-width: 768px) {
  [data-organisms--nested-form-target='removeButton'] .mobile-hidden {
    display: flex !important;
  }
}

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

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

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

/* 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);
}