/*
 * 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.
 */

/* Import Pico CSS Framework */
@import "pico.min.css";

/* Custom application styles */
@import "pico-custom.css";

/* Spinner animation for loading states */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-left-color: #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner[aria-busy="true"] {
  margin: 0 auto;
}

/* Small button styles */
.button.small {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  margin: 0;
}

/* Status markers */
.status-success { background-color: #d4edda; color: #155724; }
.status-active { background-color: #d1ecf1; color: #0c5460; }
.status-warning { background-color: #fff3cd; color: #856404; }
.status-error { background-color: #f8d7da; color: #721c24; }