.badge { display:inline-block; padding:2px 6px; border-radius:6px; background: var(--brand-100); color: var(--brand-700); font-size: var(--fs-xs); }
/*
 * 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.
 */

/* Collapsible filters */
[data-task-listing-target="filterContent"] {
  transition: max-height 0.3s ease-in-out;
}

[data-task-listing-target="toggleIcon"] {
  transition: transform 0.2s ease-in-out;
}

[data-task-listing-target="filterHeader"] {
  cursor: pointer;
  user-select: none;
}

[data-task-listing-target="filterHeader"]:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Card component (Design System) */
.card {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0.75rem; /* matches .form__container */
  padding: 1rem; /* ensure inner spacing for list views */
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: all 200ms ease;
}

.card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 36px rgba(124, 58, 237, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Stronger padding variant when explicitly requested */
.card.card--padded {
  padding: 1.5rem;
}

.card__title {
  margin: 0 0 0.75rem 0;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Tables inside cards should expand fully but respect card padding */
.card > .table {
  width: 100%;
}