/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* --- Supervisor Dashboard: Row update highlighting --- */

.supervisor-row-update {
  animation: supervisor-row-flash 1.5s ease-out;
}

@keyframes supervisor-row-flash {
  0%   { background-color: #fef9c3; } /* yellow-100 */
  100% { background-color: transparent; }
}

tr[data-category="active"].supervisor-row-update {
  animation: supervisor-row-new 1.5s ease-out;
}

@keyframes supervisor-row-new {
  0%   { background-color: #dcfce7; } /* green-100 */
  100% { background-color: transparent; }
}

tr[data-category="completed"].supervisor-row-update {
  animation: supervisor-row-completed 1.5s ease-out;
}

@keyframes supervisor-row-completed {
  0%   { background-color: #f3f4f6; } /* gray-100 */
  100% { background-color: transparent; }
}

/* --- Supervisor Dashboard: Filter chip styles --- */

.supervisor-chip {
  background-color: #f9fafb; /* gray-50 */
  border-color: #e5e7eb;     /* gray-200 */
  color: #6b7280;            /* gray-500 */
}

.supervisor-chip:hover {
  background-color: #eef2ff; /* indigo-50 */
  border-color: #c7d2fe;     /* indigo-200 */
  color: #4338ca;            /* indigo-700 */
}

.supervisor-chip-active {
  background-color: #eef2ff; /* indigo-50 */
  border-color: #818cf8;     /* indigo-400 */
  color: #4338ca;            /* indigo-700 */
}