@layer components {
  /* ── Toolbar trigger ─────────────────────────────────────────────── */

  .filter-trigger {
    gap: var(--spacing-sm);

    svg {
      flex: none;
    }
  }

  .filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--baseline) * 2.5);
    height: calc(var(--baseline) * 2.5);
    padding-inline: calc(var(--baseline) * 0.75);
    border-radius: calc(var(--baseline) * 1.25);
    background: var(--accent-color);
    color: var(--text-on-emphasis-color);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
  }

  #invoice-filters el-dialog-panel {
    width: min(100%, calc(var(--baseline) * 56));

    /* Mini sheet: toolbar strip on top, padded content below. */
    & > form > .content {
      padding: var(--spacing-md);
    }
  }

  /* ── Facet sections, separated by spacing alone ──────────────────── */

  #invoice-filters fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;

    & + fieldset {
      margin-block-start: var(--spacing-lg);
    }

    input[type="date"],
    input[type="number"] {
      width: 100%;
    }
  }

  #invoice-filters legend {
    padding: 0;
    margin-block-end: var(--spacing-sm);
    color: var(--text-color);
    font-size: var(--font-size-sm);
    line-height: var(--line-height);
  }

  #invoice-filters fieldset > ul {
    display: flex;
    flex-direction: column;
    max-height: calc(var(--line-height) * 10);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
  }

  #invoice-filters fieldset li > label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-height: var(--line-height);
    cursor: pointer;

    span {
      min-width: 0;
      overflow-wrap: anywhere;
    }
  }

  #invoice-filters fieldset > p {
    margin: 0;
    color: var(--muted-color);
  }

  #invoice-filters footer {
    margin-block-start: var(--spacing-lg);
  }

  #invoice-filters fieldset > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);

    label {
      display: flex;
      flex-direction: column;
      gap: calc(var(--baseline) * 0.5);

      & > span {
        color: var(--muted-color);
        font-size: var(--font-size-sm);
        line-height: var(--line-height);
      }
    }

    .money-field {
      width: 100%;
    }
  }
}