/* Smooth transitions for turbo frame replacements */
turbo-frame {
  animation: fadeIn 0.2s ease-in-out;
}

turbo-frame.turbo-frame-loading {
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
}

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

/* Highlight the row being edited */
tr:has(td.bg-blue-950\/30) {
  position: relative;
  z-index: 10;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Better focus states for inputs */
input:focus, select:focus, textarea:focus {
  outline: none !important;
  ring: 2px !important;
  ring-color: rgba(59, 130, 246, 0.5) !important;
  border-color: transparent !important;
}

/* Smooth hover transitions */
.group:hover .group-hover\:opacity-100 {
  transition: opacity 0.2s ease-in-out;
}

/* Loading state for forms */
form.loading {
  pointer-events: none;
  opacity: 0.7;
}

form.loading input[type="submit"] {
  background-color: rgb(107 114 128);
  cursor: wait;
}

/* Make table cells maintain their width during editing */
td {
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Left accent stripe for table rows — uses box-shadow instead of border-left
   to avoid border-collapse artifacts (ghost line on the table's left edge) */
.row-accent-slate-600 { box-shadow: inset 4px 0 0 0 rgb(71 85 105); }
.row-accent-slate-700-60 { box-shadow: inset 4px 0 0 0 rgb(51 65 85 / 0.6); }
.row-accent-red-600 { box-shadow: inset 4px 0 0 0 rgb(220 38 38); }
.row-accent-yellow-600 { box-shadow: inset 4px 0 0 0 rgb(202 138 4); }
.row-accent-green-600 { box-shadow: inset 4px 0 0 0 rgb(22 163 74); }
.row-accent-purple-600 { box-shadow: inset 4px 0 0 0 rgb(147 51 234); }