/* Validation and Error Handling Styles */

/* Form validation states */
.field-error {
  @apply mt-1 text-sm text-red-600;
}

.field-success {
  @apply mt-1 text-sm text-green-600;
}

/* Input field states */
input.border-red-500,
textarea.border-red-500,
select.border-red-500 {
  @apply border-red-500 focus:border-red-500 focus:ring-red-500;
  box-shadow: 0 0 0 1px rgb(239 68 68 / 0.1);
}

input.border-green-500,
textarea.border-green-500,
select.border-green-500 {
  @apply border-green-500 focus:border-green-500 focus:ring-green-500;
  box-shadow: 0 0 0 1px rgb(34 197 94 / 0.1);
}

/* Shake animation for validation errors */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(2px);
  }
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* Validation summary styles */
.validation-summary {
  @apply bg-red-50 border border-red-200 rounded-md p-4 mb-4;
}

.validation-summary h3 {
  @apply text-sm font-medium text-red-800;
}

.validation-summary ul {
  @apply list-disc pl-5 space-y-1;
}

.validation-summary li {
  @apply text-sm text-red-700;
}

/* Submit error styles */
.submit-error {
  @apply bg-red-50 border border-red-200 rounded-md p-4 mb-4;
}

.submit-error h3 {
  @apply text-sm font-medium text-red-800;
}

.submit-error div {
  @apply mt-2 text-sm text-red-700;
}

/* Loading states */
.form-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.form-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Button loading states */
button[disabled] {
  @apply opacity-50 cursor-not-allowed;
}

button .loading-spinner {
  @apply animate-spin -ml-1 mr-3 h-4 w-4 text-white inline;
}

/* AJAX notification styles */
.ajax-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  padding: 12px 16px;
  border-radius: 6px;
  color: white;
  font-weight: 500;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.ajax-notification.show {
  transform: translateX(0);
}

.ajax-error {
  background-color: #dc2626;
}

.ajax-success {
  background-color: #059669;
}

.ajax-info {
  background-color: #0ea5e9;
}

.ajax-warning {
  background-color: #d97706;
}

/* Kanban board validation styles */
.task-card.validation-error {
  @apply border-red-500 bg-red-50;
  animation: shake 0.5s ease-in-out;
}

.task-card.task-locked {
  @apply border-yellow-500 bg-yellow-50 opacity-75;
  cursor: not-allowed;
}

.task-card.task-locked::after {
  content: "🔒";
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 12px;
}

/* Drag and drop states */
.kanban-column.drag-over {
  @apply bg-blue-50 border-blue-300;
  transform: scale(1.02);
  transition: all 0.2s ease-in-out;
}

.task-card.dragging {
  @apply opacity-50 transform rotate-2;
  z-index: 1000;
}

.task-card-ghost {
  @apply opacity-30 bg-gray-200;
}

.task-card-chosen {
  @apply shadow-lg transform scale-105;
}

.task-card-drag {
  @apply transform rotate-2 shadow-xl;
}

/* Connection status indicator */
.connection-status {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  z-index: 1000;
  transition: all 0.3s ease-in-out;
}

.connection-status.connected {
  @apply bg-green-100 text-green-800 border border-green-200;
}

.connection-status.disconnected {
  @apply bg-red-100 text-red-800 border border-red-200;
}

.connection-status.error {
  @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
}

/* Active users indicator */
.active-users-indicator {
  @apply flex items-center space-x-2 text-sm text-gray-600 bg-gray-100 px-3 py-1 rounded-full;
}

.active-users-indicator i {
  @apply text-green-500;
}

/* Conflict modal styles */
.conflict-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.conflict-modal-content {
  @apply bg-white rounded-lg p-6 max-w-md mx-4 shadow-xl;
}

.conflict-modal-content h3 {
  @apply text-lg font-semibold text-gray-900 mb-4 flex items-center;
}

.conflict-modal-content h3 i {
  @apply text-yellow-500 mr-2;
}

.conflict-modal-content p {
  @apply text-gray-700 mb-6;
}

.conflict-modal-buttons {
  @apply flex space-x-3 justify-end;
}

.conflict-modal-buttons button {
  @apply px-4 py-2 rounded-md font-medium;
}

.conflict-modal-buttons .btn-secondary {
  @apply bg-gray-200 text-gray-800 hover:bg-gray-300;
}

.conflict-modal-buttons .btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700;
}

/* Workload indicator styles */
.workload-indicator {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease-in-out;
}

.workload-indicator.workload-normal {
  background-image: url("/static/images/mario/mario-normal.f1139e8060ab.png");
}

.workload-indicator.workload-busy {
  background-image: url("/static/images/mario/mario-busy.15229bdee504.png");
  animation: bounce 2s infinite;
}

.workload-indicator.workload-overloaded {
  background-image: url("/static/images/mario/mario-overloaded.a9976fb14a65.png");
  animation: shake 1s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-4px);
  }
  60% {
    transform: translateY(-2px);
  }
}

/* Progress indicators */
.progress-bar {
  transition: width 0.5s ease-in-out;
}

.progress-ring {
  transition: stroke-dasharray 0.5s ease-in-out;
}

/* Form field focus states */
input:focus,
textarea:focus,
select:focus {
  @apply outline-none ring-2 ring-offset-2;
}

input:focus:not(.border-red-500):not(.border-green-500),
textarea:focus:not(.border-red-500):not(.border-green-500),
select:focus:not(.border-red-500):not(.border-green-500) {
  @apply border-blue-500 ring-blue-500;
}

/* Tooltip styles for validation */
.validation-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}

.validation-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1f2937;
}

.field-container:hover .validation-tooltip {
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .ajax-notification {
    right: 10px;
    left: 10px;
    max-width: none;
  }

  .conflict-modal-content {
    margin: 20px;
  }

  .validation-summary {
    margin: 10px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .validation-summary {
    @apply bg-red-900 border-red-700;
  }

  .validation-summary h3 {
    @apply text-red-200;
  }

  .validation-summary li {
    @apply text-red-300;
  }

  .submit-error {
    @apply bg-red-900 border-red-700;
  }

  .submit-error h3 {
    @apply text-red-200;
  }

  .submit-error div {
    @apply text-red-300;
  }

  .conflict-modal-content {
    @apply bg-gray-800 text-white;
  }

  .conflict-modal-content p {
    @apply text-gray-300;
  }
}

/* Print styles */
@media print {
  .ajax-notification,
  .connection-status,
  .conflict-modal,
  .validation-tooltip {
    display: none !important;
  }
}