.input-error {
  border-color: #ef4444 !important;  /* Red-500 */
  background-color: rgba(239, 68, 68, 0.05) !important; /* Light red background */
}

.border-red-500 {
  border-color: #ef4444 !important;  /* Red-500 */
  background-color: rgba(239, 68, 68, 0.05) !important; /* Light red background */
}

/* Animations for toast notifications */
@keyframes slideIn {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

#toast {
  animation: slideIn 0.3s ease-out forwards, fadeOut 0.5s ease-in forwards 2.5s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Make sure button styles are consistent */
#meet_info_btn, #app_sanction_btn {
  background-color: #2563eb !important; /* Blue-600 */
}

#meet_info_btn:hover, #app_sanction_btn:hover {
  background-color: #1d4ed8 !important; /* Blue-700 */
}

#saveButton {
  background-color: #4b5563 !important; /* Gray-600 */
}

#saveButton:hover {
  background-color: #374151 !important; /* Gray-700 */
}

/* Grid layouts for officials section */
.three-officials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row;
  gap: 1.5rem;
}

.three-officials-grid > div.hidden {
  display: none !important;
  grid-column: span 0 !important;
  grid-row: span 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  position: absolute !important;
  overflow: hidden !important;
  width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.six-officials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row;
  gap: 1.5rem;
}

/* Required field indicators */
.required-indicator {
  color: #ef4444; /* Red-500 */
  font-weight: bold;
}

/* Add styles for form validation feedback */
.input-error {
  border-color: #ef4444 !important;  /* Red-500 */
  background-color: rgba(239, 68, 68, 0.05) !important; /* Light red background */
}

/* Add asterisk for required field legend */
fieldset:has(input[required]) > legend::after {
  content: " *";
  color: #ef4444; /* Red-500 */
  font-weight: bold;
  display: inline;
}