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

.ach-entry-details[open] .ach-entry-collapsed-copy {
  display: none;
}

/* Multi-select / pill component styles live in multi_select.css. */

.pill-pro {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  background-color: var(--color-warning-400);
  color: var(--color-neutral-900);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── Pill / Badge Styles ─────────────────────────────────────── */

.pill--done {
  background-color: rgba(22, 163, 74, 0.15);
  color: var(--color-success-200);
  border-color: rgba(74, 222, 128, 0.3);
}

.pill--in-progress {
  background-color: rgba(105, 153, 199, 0.2);
  color: var(--color-secondary-200);
  border-color: rgba(105, 153, 199, 0.4);
}

.pill--pending {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--color-neutral-300);
  border-color: rgba(255, 255, 255, 0.1);
}

.pill--warning {
  background-color: rgba(255, 156, 64, 0.15);
  color: var(--color-warning-100);
  border-color: rgba(255, 156, 64, 0.3);
}

.pill--info {
  background-color: rgba(105, 153, 199, 0.15);
  color: var(--color-secondary-100);
  border-color: rgba(105, 153, 199, 0.3);
}

.pill--alert {
  background-color: rgba(248, 113, 113, 0.15);
  color: var(--color-danger-100);
  border-color: rgba(248, 113, 113, 0.3);
}