/* Telas de custo */
.period-filter { display: grid; gap: 0 var(--space-3); margin-bottom: var(--space-4); }
.period-filter .field { margin-bottom: var(--space-3); }

@media (min-width: 640px) {
  .period-filter { grid-template-columns: repeat(3, minmax(0, 14rem)); }
}

.notice-inline {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

/* Barras por categoria: SVG ao lado da lista, mesma altura de linha */
.cost-categories { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.cost-categories__list { display: grid; margin: 0; padding: 0; list-style: none; }

.cost-categories__item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 2.75rem;
  align-items: center;
  border-bottom: var(--border-width) solid var(--color-border-soft);
}

.cost-bars { display: none; }

@media (min-width: 640px) {
  .cost-categories { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .cost-bars { display: block; width: 100%; order: 2; }
}

.cost-bars__bar--0 { fill: var(--color-primary); }
.cost-bars__bar--1 { fill: var(--color-accent-strong); }
.cost-bars__bar--2 { fill: var(--color-info); }
.cost-bars__bar--3 { fill: var(--color-warning); }
.cost-bars__bar--4 { fill: var(--avatar-3); }
.cost-bars__bar--5 { fill: var(--avatar-5); }